DEV Community: tewkesburyd

Ruby, Generating Seeds with Excel

tewkesburyd — Tue, 24 Jan 2023 19:14:23 +0000

While working on the backend of a e-commerce clone application, my group had all of the product data stored in a excel file. It seemed tedious to go through and create the products again in the seeds.rb. There had to be a simpler way, and there is. This was our process. Yours may be different based on the version of Ruby you have, but the core concepts should be the same.

To start, make a new csv directory within the db directory.

Next, we need to make sure that the spreadsheet is formatted properly. The data needs to be stored in an actual table.

If your table has headers, make sure that the "My table has headers" box is checked. Ours included headers.

From here, save your file as CSV format to the csv directory you created earlier. Its important to note that each table needs to be its own file. You can not have multiple sheets tabs. So, if you have multiple tables, they need to be saved as individual csv files.

If you haven't generated your tables or models, now is a good time. Make sure your columns names match up with your csv columns names. If not, you will end up with your data in the wrong columns.

Now we can start coding in the seeds.rb file.

At the top of the file we need to include:

require "csv"

This provides the built in CSV class methods.

Next, we need to tell Ruby to read the content of the file and set that to a variable we can use:

csv_text = File.read('./db/csv/Products.csv')

Now, we need to parse the file:

csv_text = File.read('./db/csv/Products.csv')
csv = CSV.parse(csv_text, 
    :headers => true, 
    :header_converters => :symbol
)

Here we included the read file variable we just set, set headers to true, and converted the headers to symbols.

The next step is to iterate through the data and create a new product for each row.

csv_text = File.read('./db/csv/Products.csv')
csv = CSV.parse(csv_text, 
    :headers => true, 
    :header_converters => :symbol
)
csv.each do |row|
    Product.create!(row.to_hash)
end

Here we used .each as the iterator and told Ruby that for each row we wanted to call Product.create. We also included the bang operator "!" to raise an exception if the data does not match the data types that were defined in the Product table. Finally, we called the to_hash method on each row, to ensure that each row is returned as a hash.

You can repeat this process for each of your csv files.

React Controlled Form Fetch Post, With Multiple Inputs

tewkesburyd — Sun, 11 Dec 2022 23:02:30 +0000

We will be using state to make a controlled form React. The form wants to get the first name, age, and location of a user. The first thing we need to do is import state to the component and set up the form.

import React, {useState} from "react";

function form (){
   const [formValues, setFormValues] = useState({
                                        firstName: "",
                                        age: 0,
                                        location: ""
                                        })

   return(
    <form>
      <input name="firstName" />
      <input name="age" />
      <input name="location" />
      <button type="submit">Submit</button>
    </form>
   )
}

From the code above, we will be collection all he input in one state. Now that everything is set up we can move forward. We need to write a function that can handle changes to the form inputs and set the values in the state.

import React, {useState} from "react";

function form (){
   const [formValues, setFormValues] = useState({
                                        firstName: "",
                                        age: 0,
                                        location: ""
                                        })

   const handleChange = (e) => {
       setFormValues({...formValues, [e.target.name]:e.target.value})
   }

   return(
    <form>
      <input 
         name="firstName" 
         value={formValues.firstName} 
         onChange={handleChange} 
      />
      <input 
         name="age" 
         value={formValues.age} 
         onChange={handleChange}
      />
      <input 
         name="location" 
         value={formValues.location} 
         onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
   )
}

In the code above, you can see that the handleChange function uses the spread operator on the initial state structure. It then uses [e.target.name], by placing this in square brackets, the e.target.name becomes more flexible. This will then associate name value that is respective input. The handleChange also sets the state to an object withe the respective key:value pairs.

The next step is to submit the form and post it to the database.

import React, {useState, useEffect} from "react";

function form (){
   const [formValues, setFormValues] = useState({
                                        firstName: "",
                                        age: 0,
                                        location: ""
                                        })

   const handleChange = (e) => {
       setFormValues({...formValues, [e.target.name]:             e.target.value})
   }

   const handleSubmit = (e) => {
       e.preventDefault()
       fetch('SOME API HERE', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(formValues)
        })
   }

   return(
    <form onSubmit={handleSubmit} >
      <input 
         name="firstName" 
         value={formValues.firstName} 
         onChange={handleChange} 
      />
      <input 
         name="age" 
         value={formValues.age} 
         onChange={handleChange}
      />
      <input 
         name="location" 
         value={formValues.location} 
         onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
   )
}

Array Has Target Sum

tewkesburyd — Fri, 18 Nov 2022 17:39:01 +0000

Here is a fun challenge to practice nested looping.

We are going to write a function that takes two parameter, an array of numbers, and a target number.

The goal of the function is to determine if the array contains two numbers, when added together, equal the target number.

Lets start:

Let's first declare a function and set the parameters.

const hasTargetSum = (array, target) => {...}

Now we need need to loop over the array. We will use simple a for loop. Here we need to set three expressions.

for (let i = 0; i < array.length; i++)

The first is which index position to start at. Index 0 is the first number of the array.

The second is a condition for when to stop the loop. We want i to go over all numbers in the array and stop at the last number.

The third is how the loop will move over the array. There are many ways to write this. i++ is stating that we will increase i by 1 after each loop.

Here are all the current steps together.

const hasTargetSum = (array, target) => {
  for (let i = 0; i < array.length; i++){
    ....
  }
}

We know we have to add two numbers in the array together. To do this, we will need to loop over the array again. We can use another for loop, but this one will be slightly different that the previous for loop.

const hasTargetSum = (array, target) => {
  for (let i = 0; i < array.length; i++){
    for (let n = 1; n < array.length; n++){
      ....
    }
  }
}

Here we will start at index i+1. The reason we set n to i+1 is because we want to stay one index position ahead of i. This will prevent iterating over the same numbers. The rest of the for loop will be the same.

Now we need to write an expression for adding two numbers in the array and to see if their sums equal the target. We also need to determine what happens if that expression is true or false. Remember, we want both loops to run completely before we determine if the statement is false.

const hasTargetSum = (array, target) => {
  for (let i = 0; i < array.length; i++){
    for (let n = 1; n < array.length; n++){
      if(array[i]+array[n] === target){
        return true
    }
  }
return false
}

Let's try an example and explain what's going on.

const array = [1, 3, 8, 10, 5, 3]
const target = 15

const hasTargetSum = (array, target) => {
  for (let i = 0; i < array.length; i++){
    for (let n = i+1; n < array.length; n++){
      if(array[i]+array[n] === target){
        return true
      }
    }
  }
  return false
}

In the example, the first loop starts at index 0 (the number 1). Then the second for loop is initiated and starts at index 1 (the number 3). The if statement then checks if the sum of those numbers equals the target, 6. Since it does not, i moves to the next index number. The reason n does not change yet is because the second for loop is nested and will continue to run until it reaches the point it is told to stop (n < array.length).

Here is what's happening:
1+3
1+8
1+10
1+5
1+3

Since none of these sums equals the target, it moves back to the first for loop and moves the start index forwards one. Then the process repeats.

None of these sums equal the target. The pattern repeats:
3+8
3+10
3+5
3+3

None of these sums equal the target. The pattern repeats:
8+10
8+5
8+3

Still none. The pattern repeats, until:
10+5

Now that we have two numbers, that when added, equal the target. "true" gets returned.