My fourth project for FlatIron was the most challenging so far, but learned so much about JS and working with a back end server. In this blog we will review a way that to access nested resources and manipulate an API's JSON responses to retrieve specific nested data to present with JS in the front end of the program.
Schema in Rails
Library has many Songs through Liked Songs
Songs have many Libraries through Liked Songs
Liked Songs belong to Library/ Song
The schema in Rails says that this Liked Song does not have any attributes of a Song like name, artist, etc. as it is purely a relationship table on the back end. But when looking at the JS class that is Liked Song it does include all of those attributes. This is made possible because of Rail's ability to render JSON that includes nested resources as well as the new ES6 Classes and Constructor in Javascript.
By utilizing (json: -> include()) rails will pass back not only the Liked Song relationship information but also the song information that is nested. Basically, in Rails the way we constructed the JSON response for Liked Songs will always have Song information nested in it.
When a JSON response comes back, this function iterates through the Liked Song INDEX array and pulls the Song value from these Liked Songs. The front end knows to do this because when iterating through the song attribute hash is being called on in object[i].song. object is a variable for the JSON response and object[i] calls that instance in the iteration. Then the Song value is pulled by calling the .song attribute on the response.
The front end then instantiates new instances of a Liked Song from the Song information in this response, as the constructor parameters are satisfactory for a new Liked Song. It is key to remember that with a Rails API you are controlling this information that comes back to your front end through the render at the end of your controller method. If you initialize Rails models and controllers through rails generate, they will not automatically render these nested resources even if relationships were set properly upon migration.
One other key thing to keep in mind is where the fetch calls are being sent, and if your routes are set up properly to handle this. In this project I left Liked Songs under Libraries which were under Users. Ensure that you make the fetch call to the right route and with the proper method in order to end up rendering your desired nested resources. Saving data such as IDs to simulate a logged in experience is possible through using Local Storage and Session Storage.
At this point it really is up to the developer how they want to utilize and present this information from this relationship map. For example, my application was essentially a mock Spotify Library, and if a Song was liked by a User, it would re-render all of the Liked Songs in the library so that it would include the new Liked Song. Another example could be an apartment finding site where a User class can like an Apartments Class that is kept track of in LikedApartments Class. When passing back a Liked Apartment, you can also pass the Apartment info.
Top comments (0)