My First Rails API and JS Frontend Project

I decided to create a fiber craft keeper called Fiber Me This. The idea of this application was to have a space where the user could store patterns or pattern ideas using the following attributes: name, difficulty, description, and yarn. There are two objects (Category and Pattern) where the later belongs to the former in the rails database.

To start off the project we had to create a rails api only application which was easy enough with the following code:

rails new application-name --api

This will build out a slimmed down version of a rails application so that you are able to use CRUD routes without the views. All CRUD functions would be utilized using fetch requests from the frontend like the following function I used to display all patterns:

static getPatterns(){
        fetch(pattern_url)
        .then(resp => resp.json())
        .then(patterns => {
            for(const pattern of patterns){
                let p = new Pattern(pattern)
                p.appendPattern()
            }
        })
    }

This class function would first use the pattern_url to receive a response that I then jsonified so that I would have an array of pattern objects from the index route. For each element of that array I instantiated a new Pattern object by passing in the current element's attributes. I was able to use destructuring assignment to set the new Pattern instances attributes to the values from the one's passed in. To get this to work my constructor function needed an object passed in v.s. just having parameters.

constructor({name, difficulty, description, yarn, category_id}){
        ...
    }

Problem 1: How to Assign the Category Id to an Instance of Pattern

When I created my new pattern form I couldn't figure out how to set the value of the category_id for my new pattern instance. All the other attributes for the new pattern object could be set by taking the values from that part of the form when submitting a new pattern:

static createPattern(){
    const newP = {
        name: document.getElementById("name").value,
        difficulty: document.getElementById("difficulty").value,
        description: document.getElementById("description").value,
        yarn: document.getElementById("yarn").value,
        category_id: document.getElementById("pattern-dropdown").value
    }

Even though the category_id should have been set the same as the other attributes that wasn't working out. Since I decided to use a element to choose the category for new patterns I had to find a way to take the dropdown choice and set the category_id to it. With a little research I found that I could set the value of the HTML form to equal the id that the categories have in the database. This solved the above problem and successfully creates a new pattern object that was then passed to below fetch request:

const configObj = {
        method: "POST",
        headers:{
            "Content-Type": "application/json"
        },
        body: JSON.stringify(newP)
    }

    fetch(pattern_url, configObj)
    .then(resp => resp.json())
    .then(pattern => {
        const p = new Pattern(pattern)
        p.appendPattern()
    })