Forem: pjparham

Rails Accepting Nested Parameters and Files

pjparham — Wed, 08 Mar 2023 18:44:24 +0000

Recently, I ran into a problem while programming my last project. I have a Recipe object that has_many Ingredient objects, and it also has an attached image.

To get started with accepting nested parameters, I highly recommend checking out this article that does a great job at summing up Ruby's 'accepts_nested_attributes_for' macro to create multiple associated objects upon creation of your primary object.

I had set my app up following that guide, and it was working perfectly. My recipe was getting created, along with all the associated ingredient objects. However, that was when I was sending the data via JSON.

JSON vs FormData

JSON data does a great job at handling nested objects. The complexity came when I brought in passing an image file to Ruby from JavaScript. JSON does not allow you to send over full files. I had to use JavaScript's 'FormData' to send over the image file, but when I was passing in my other data to 'FormData' like I had with my JSON data, Ruby param's would show '[object Object]' as my params for 'ingredients_attributes'. This was an issue, and I had a hard time locating a working solution online. I found a solution that is not very complicated, so I am writing this article to share that here!

JavaScript code to properly append nested data to FormData()

I'm going to pair some of this down for simplicity's sake. Let's say we have a form that has the state of recipeName that points to a string and state of ingredients that points to an array of objects with the keys quantity, unit, and name.

Inside our handle submit, we will begin by instantiating a recipe object.

const recipe = {
name: recipeName,
ingredients_attributes: ingredients
}

We will then instantiate a the FormData variable and append the recipe's name like so:

const formData = FormData()
formData.append("name", recipe.name)

The above code is simple enough. I will now demonstrate how to append our ingredients attributes so that we are able to send as many ingredients objects as we need. We will be doing this using a forEach with index. Like I mentioned above, it is not a very complicated solution, but I had a hard time locating a solution online so I hope this can help someone else in their coding journey.

recipe.ingredients_attributes.forEach((ingredient, index) => {
  formData.append(`ingredients_attributes[${index}][quantity]`, ingredient.quantity;
  formData.append(`ingredients_attributes[${index}][unit]`, ingredient.unit;
  formData.append(`ingredients_attributes[${index}][name]`, ingredient.name;

So as you can see, when using form data we need to append each individual key value pair for Ruby to access the information properly. We can utilize the index in JavaScript's forEach to allow us to send as many nested objects as we'd like, iterating over the different key value pairs that we are expecting in our object. I will also add that in this specific form, quantity and unit were optional values for the user, so they always instantiated as an empty string to prevent any errors on our backend.

I hope that this article helps you get over any bumps in your challenge. Happy coding!

Ruby on Rails relationships for models that join on multiple tables.

pjparham — Mon, 09 Jan 2023 21:44:56 +0000

Ruby on Rails offers many tools to link models in your database, sometimes so many that it can be confusing to find the correct solution for your problem. I recently had two models, User and Image, that joined on two tables, Reviews and Favorites. Finding the right solution for this issue took some leg work, but eventually I implemented a clean solution that worked just as I needed it to. Keep reading if you too want to discover how to handle models that join on multiple tables.

The problem

I made a web app that had Users and Images. Users and Images both had many favorites and many reviews. Favorites are created when a user favorites an image, and reviews are created when a user reviews an image.

I needed both my users to both access what images they have liked and what images they have favorited, and the reciprocal for my images.

If I only had one joins table, I would achieve this relationship with the following code:

class User < ApplicationRecord
has_many :images, through: :reviews

However, things start to look wrong when you add in the second relationship:

has_many :images, through: :reviews
has_many :images, through: :favorites

The solution

Solving the above problem required me to search in a variety of places and was not the easiest to find, however the solution itself is very simple.

has_many :reviewed_images, :through => :reviews, :source => :image
has_many :favorite_images, :through => :favorites, :source => :image

This allows me to access the necessary data easily.

Usage

Let's say I was playing around with this code in my Ruby console. If I set an instance of my user class equal to u1, I could call that user's favorite images with the syntax u1.favorite_images, and I could call their reviewed images with u1.reviewed_images. Pairing this access with my Controllers and Serializers, we can now send the nested data to the front end so our app operates the way we want it to.

Quick Start guide to creating a table using Active Record

pjparham — Sun, 20 Nov 2022 23:52:36 +0000

Object-Relational Mapping

Object-Relational Mapping(ORM) is a technique that allows you to query and change data in a database using an object-oriented approach. When using an ORM, your classes will be database tables and instances of those classes will exist as rows in those tables. Using an ORM allows a developer to cut down on repetitive code while also implementing conventional, organized patterns. These practices keep a code base clean and readable, which is important especially when many developers will be working on the code.

There are patterns that you will see when using an ORM that are worth taking note of. While classes are typically defined with a singular word, a class's corresponding table will be plural. If we have a Book class, the corresponding table will be books. Instances of the Book class will be stored in the books table as rows, and attributes for those instances will be stored in columns in the books table.

Introducing Active Record

Active Record is an ORM library that can be used with Ruby. Active Record comes with many built in methods that make it easier to manipulate our data. To use the Active Record gem in your code, you can simply run gem install activerecord in your terminal, or by including it in your code's Gemfile.

To make use of Active Record's built-in ORM methods, we need to make our Ruby class a subclass of ActiveRecord::Base.

class Book < ActiveRecord::Base
end

Now our Book class is able to talk to the books table in the database. Something important to keep in mind when using Active Record is that Active Record follows convention over configuration. This means that as long as you follow the conventions adopted by Active Record, you will need to write very little to no configuration for your models. It is very important that your class names are singular and table names are plural. As long as a developer follows this rule, Active Record can save developer's a lot of time and make their code much more readable.

Some useful methods from Active Record

Making our Ruby classes subclasses of Active Record gives them access many methods. One very useful method is that attr_accessors are usable with our code without having to explicitly write them in. I've defined some other useful methods from Active Record below, but I recommend any developer that is interested in using Active Record to read the Active Record docs to see all that it can really do.

`.column_names`

Retrieve a list of the columns in a table:

Book.column_names
#=> [:id, :name, :author, :genre]

`.create`

Creates a new object for the class and saves the instance to the class's corresponding table

Book.create(name: 'The Stranger', author: 'Albert Campus', genre: 'Philosophical novel')
# INSERT INTO books (name, author, genre) VALUES ('The Stranger', 'Albert Campus', 'Philosophical Novel') 
#=> #<Book: 0x00009f785d0832b0 id: 1, name: "The Stranger", author: "Albert Campus", genre: "Philosophical novel">

`.all`

Return all the records from a table as instances of its class

Book.all
# SELECT "books".* FROM "books"
# => [#<Book: 0x00009f785d0832b0 id: 1, name: "The Stranger", author: "Albert Campus", genre: "Philosophical novel">]

`.find`

Retrieve an object from the database by its id:

Book.find(1)
# SELECT "books".* FROM "books" WHERE "books"."id" = 1 LIMIT 1
#=> #<Book: 0x00009f785d0832b0 id: 1, name: "The Stranger", author: "Albert Campus", genre: "Philosophical novel">

`.find_by`

Find an object by any attribute, such as author

Book.find_by(author: 'Albert Campus')
# SELECT "books".* FROM "books" WHERE "books"."author" = 'Albert Campus' LIMIT 1
#=> #<Book: 0x00009f785d0832b0 id: 1, name: "The Stranger", author: "Albert Campus", genre: "Philosophical novel">

Active Record Migrations

Active Record migrations are used to set up our database, and we use this format for many reasons. They provide a history of the changes made, providing version control for our database. Using Active Record migrations also allows us to forego writing SQL statements to create or change tables, as Active Record will do this for us under the hood.

To tell Active Record how we want it to connect to our database, we will use a config/database.yml file. This file is used by convention with Active Record to provide details about how to connect with our database. For this example, we will be using SQlite, but Active Record does support other database adaptors. This is what it looks like:

development:
  adapter: sqlite3
  database: db/development.sqlite3

test:
  adapter: sqlite3
  database: db/test.sqlite3

Now let's set up our environment.rb file. This file requires the gems in our Gemfile to give our program access them them. ENV["RACK_ENV"] is our environment variable, which is set to development in this example. RACK_ENV is a specific environment variable used by the sinatra-activerecord gem to determine what database to connect to. Our environment.rb file contains the following:

ENV["RACK_ENV"] ||= "development"

require 'bundler/setup'
Bundler.require(:default, ENV["RACK_ENV"])

Creating a migration

To create a migration to set up our books table, we will run the following command in our terminal:

bundle exec rake db:create_migration NAME=create_books

We use bundle exec rake to access our rake file that gives us a multitude of commands that can be run in the terminal, and the above code is used to create a new migration. This command generates a new file in db/migrations called 20221116095220_create_books.rb. The timestamp at the beginning is crucial for Active Record as it tells your program which order to run the migrations. The following code will be in the newly created file:

class CreateBooks < ActiveRecord::Migration[6.1]
  def change
  end
end

Since we are using this migration to create a new table, we will use the create_table command to do so. When we create our table, we will provide the attribute names for the columns as well as the datatype for each of those columns. The id column is dynamically generated, so there is no need to include it here!

class CreateBooks < ActiveRecord::Migration[6.1]
  def change
    create_table :books do |t|
      t.string :name
      t.string :genre
      t.string :author
    end
  end
end

Now that the file is set up and you've defined how you want your table to look, we must run the migration! This will create a new database file based on the contents of your migration, and it will also create a db/schema.rb file which will give you a quick view of the set up of your database. We run our migration with the following command in the terminal:

bundle exec rake db:migrate

At this stage, our db/schema.rb file will look like this:

ActiveRecord::Schema.define(version: 2022_11_16_095220) do
  create_table "books", force: :cascade do |t|
    t.string "name"
    t.string "author"
    t.string "genre"
  end
end

That's it! The table now exists in the database with the columns that we have defined in our migration, as well as an id column. This is meant to serve as a brief guide to get started with Active Record migrations, but there is so much more that you can do using Active Record! Some of the most powerful use cases for Active Record involve creating associations between classes and tables. I encourage you to check out the resources below on Active Record Basics and Active Record associations to see all that Active Record can help you accomplish. Happy Coding!

Resources

Active Record Basics
Active Record Associations

PATCHing nested JSON data in a react application

pjparham — Fri, 07 Oct 2022 18:06:29 +0000

PATCHing nested JSON data

Working with JSON data can be tricky, and when you are working with nested data it can be even trickier. Let's say that you are working with JSON data for posts on a site and each post has a nested array of comments.

{
  "posts": [
    {
      "id": 1,
      "title": "React 101",
      "subhead": "Some basics to get you started with React",
      "body": "React apps are build using components. These components are used to give you flexibility when writing code.",
      "user": "test",
      "comments": [
        {
          "id": 1,
          "text": "this is really good",
          "username": "Jose Ramirez"
        },
        {
          "id": 2,
          "text": "very helpful!",
          "username": "Jane Smith"
        }
      ]
    },
    {
      "id": 2,
      "title": "Using JSX",
      "subhead": "JSX basics",
      "body": "When writing your markup in react, you write it in JSX. This is very similar to HTML, but with some key differences. One difference to keep in mind is that JSX things expect a prop of className rather than class.",
      "user": "test",
      "comments": [
        {
          "id": 1,
          "text": "This is great.",
          "username": "John Doe"
        },
        {
          "id": 2,
          "text": "Thanks for this!",
          "username": "Kareena Bhatt"
        }
      ]
    },

Your goal is to patch the comments. When working with nested data like this, we can pass in the key of "comments" so the data knows where to go. For the value, we first pass an array that has a value pointing to all the previous comments, then we can pass in our object with the new data. This is what a submit function could look like if you are trying to achieve this:

function onSubmit(e){
        e.preventDefault()
        const newComment = {
            "comments": [
                ...allComments,
                {"text": commentText,
                "id": (commentCountRef.current),
                "username": (user.given_name + " " + user.family_name)}
            ]
        }
        fetch(`http://localhost:3004/posts/${post.id}`, {
            method: "PATCH",
            headers: {
                "Content-Type": "application/json"
        },
        body: JSON.stringify(newComment)
        })
        .then((r) => r.json())
        .then((commentData) => setAllComments(commentData.comments))
        commentCountRef.current += 1
}

You then set your allComments state with all of the comment data. This is because this JSON request returns the entire post object that it fetches.

Utilizing the useRef hook to get id values

When dealing with data like this, another tricky thing is assigning your data the correct ID value. Although there are multiple ways to accomplish this, the useRef hook can be a useful tool and allows you to achieve this without having to import any additional packages. Let's break down how the useRef hook was used in this to assign the correct id value.

Once you have imported the useRef hook to your application and set your current comments to state, you can set the useRef hook to hold the value of the length of your comments array and add one to it, thus equaling what our next id value should be.

    const commentCountRef = useRef(post.comments.length + 1)

As seen above, this is passed into our object as the id. Now you are able to set the id of your new object and set the comments so that both your front-end and back-end technologies are updated when a new comment is submitted.

Adding Event Listeners and Understanding the DOM

pjparham — Tue, 23 Aug 2022 15:16:35 +0000

What is the DOM?

MDN docs defines the DOM as the data representation of the objects that comprise the structure and content of a document on the web. In essence, it is the HTML that is actively being displayed on the web page. We can manipulate what is being displayed on the web page using various elements available in JavaScript by accessing the various nodes.

What is a node?

<body>
  <div>
    <p>First</p>
  </div>

  <div>
    <p>Second</p>
  </div>
</body>

In the code snipit above, we have multiple nodes. Everything between the body tags is a node, the contents of an individual div element are a node, and the individual p tags are also nodes that can be accessed and manipulated.

Finding an element on the page

JavaScript has a few ways to find DOM nodes. Some of the methods that seem to get the most love are document.querySelector(), document.getElementById(), and document.getElementsByClassName(). Other available methods include document.getElementsByTagName() and document.querySelectorAll().

document.getElementById() in action
This method allows us to easily grab a node by grabbing it with the Id assigned to it.

Imagine we have the following code:

<div>
  <h1 id="heading">This is the heading</h1>
</div>

In Javascript, we can access this element with the code document.getElementById('heading'). It is often helpful to assign this a variable, which I will demonstrate here:

const heading = document.getElementById('heading')

the other methods in action
Given the following code, I will demo document.getElementsByClassName

  <div class="article-title">
    <p>3 ways to spice up your dining room</p>
  </div>

  <div class="article-title">
    <p>What trends to expect this fall</p>
  </div>

  <div class="article-title">
    <p>You won't believe what this celebrity said...</p>
  </div>

Let's say you want to grab all of the elements at the same time, and even assign them to a variable name that can be more easily accessed. We can do that with the single line of code:

let articleTitles = document.getElementsByClassName('article-title')

Debugging tip!

It is best practice to always console.log anytime you grab an element from the DOM. Some things can be tricky to grab, so it's always good to double check that the code is acting how you want it to before looking forward. Let's put all our previous code together to see that in action.
Our HTML at this point looks like:

<div>
  <h1 id="heading">This is the heading</h1>
</div>

<div class="article-title">
    <p>3 ways to spice up your dining room</p>
</div>

<div class="article-title">
    <p>What trends to expect this fall</p>
</div>

<div class="article-title">
    <p>You won't believe what this celebrity said...</p>
</div>

While our JavaScript, with our newly added console.logs, looks like

const heading = document.getElementById('heading')
let articleTitles = document.getElementsByClassName('article-title')
console.log(heading)
console.log(articleTitles)!

This is what would be expected in the console if everything is working correctly:

What is an event listener?

The addEventListener() method attaches an event handler to a specified element. addEventListener() expects two arguments: the type of event we want to listen for and a callback function that will be called whenever our event listener 'hears' what we tell it to listen for. Some of the most common types of event listeners used are click, mouseover, and keydown.

So now that we can grab nodes, how do we add event listeners to them?

It is most straightforward to add event listeners when we have assigned a variable name to an element we grabbed by its ID, so for this part of the article we will be focusing on the variable we previously named heading after getting the heading element by its ID. Since we have declared a constant variable for heading, the syntax will be heading.addEventListener(). But as previously mentioned, we must add the type of event we want to listen for and our callback function. For this demo we will be adding a click event listener to our page that simply displays a log in the console each time it is clicked.

heading.addEventListener('click', () => console.log('I was clicked!') )

Our callback function is inside of the event listener as an arrow function. If we were to simply write heading.addEventListener('click', console.log('I was clicked!'), 'I was clicked!' would be in our console when we load the page, which would defeat the purpose of adding our event listener in the first place. If the event listener is added in properly, we should see the following in our console after we click our heading:

Our console log is displaying as expected! As you explore adding event listeners in your code, you will find that you can add much more complicated functions as event listeners to create a highly interactive web page.

What about adding a function to our event listener?

If you want to put a function that you defined somewhere else in your code into an event listener, you simply leave out the () which calls the function from the event listener.

function sayHello(){
    console.log('Hello!')
};
heading.addEventListener("click", sayHello)

Debug tip

I would encourage you to always put a console.log into event listeners when you first apply them to make sure it is responding how you want it to.

I hope this article helped demystify what the DOM is and how to add event listeners to your code to actively manipulate the DOM. Happy coding!

Declaring Variables in JavaScript

pjparham — Mon, 18 Jul 2022 15:17:38 +0000

Hello! Welcome to my first post, and thank you for checking out my blog. We are going to start with something simple: the different ways to declare variables in JavaScript.

There are three ways to declare variables in JavaScript, and those are let, const, and var. Today we will just be covering let and const, which were introduced in 2015 and are now used much more often than var.

let

Using let allows us to declare a variable that we may want to change the value of at a later time. You can declare a variable using let without immediately assigning it a value.

let dog;
//=> undefined

Later you could assign a value to your variable with the following syntax:

dog = 'Ted';
//=> Ted
dog;
//=> Ted

When using let, you can assign a different value to the variable at any time.

dog;
//=> Ted
dog = 'Libby';
dog
//=> Libby

const

We use const when we want to assign a value to a variable that will remain constant throughout our code. You cannot reassign a variable declared with const, and its value must be set when declaring the variable.

const breed = 'chihuahua';
//=>undefined

breed;
//=> chihuahua

breed = 'beagle'
//=> Uncaught TypeError: Assignment to constant variable.

If you try to declare a variable using const without assigning a value, you will get an error message.

const breed
//=> Uncaught SyntaxError: Missing initializer in const declaration

I hope this helped you learn more about different ways to declare a variable in JavaScript, and when to use let and when to use const. Thanks for reading!

Resources

MDN - let
MDN - const