I felt really confident in my rails knowledge and decided early on that I wanted to have four models in my project. I began to create my Trip Planner rails backend using the following models: Trip, Category, Item, and Trip Category. The last model was necessary to create a joins table between Trip and Category since each one ‘has_many’ of the other. By day two of my project, I was seriously questioning why in the world I thought creating four models was a good idea. Nevertheless, I pressed on.
The first thing I wanted to be shown on my web application was a list of all Trips that had been created with their respective Categories listed beneath them. This required a
fetch call to my Rails API at localhost:3000/trips. I decided to create a service class that would handle all of my fetch calls, making them async functions. My first fetch looked like this:
Because this project required us to use Object Orientation, I knew I would need a
Trip class to be able to handle all of my trip objects and how I might display them to the page. For this first function, to render my trips onto the DOM I built a
renderTrip() function in my
To put it all together, I created a function in my
index.js that would both call the fetch as well as the render functions.
That single async function is called when the page first loads with my
bindEventListeners function. It effectively calls on an instance of my
ApiService class (which I create at the very top of the page --not pictures) and uses the
fetchTrips() instance method to retrieve all of my trip-related data. Once I have the data, I iterate through each trip object, creating a new instance of my
Trip Class and then using my
renderTrip method to display each of them on the page.
My project was starting to look like a real web application! Once I understood how to use my
Api Service class effectively, retrieving the data I needed wasn't too much of a challenge. The most challenging piece of this project for me was manipulating the DOM in a way that allowed me to store all of the necessary object ids in places where I could access them to eventually create a new object. For example: to create a new instance of my
Item class, each Item needed to know both the trip instance(
trip_id) and category instance(
category_id) it belongs to. To do this, I had to sneakily insert that information into the document and the form within which the item instance is created.
In my createNewItem() function, I needed the
category_id information to create my
configObj which would be sent to my backend in order to create a new instance of an
Item. I was able to pull the
trip_id from a
<div> element that I had created on the page with the id of that particular trip.
And I had access to the item’s
category_id from a form dataset that I inserted into the item's form when the form was created:
To create the item instance itself, I just had to pull it all together:
Originally published at https://dev.to on January 7, 2021.