A Single Page Application for those of you who don't know is a Web app that loads a single HTML page and dynamically updates this specific page as the user interacts with the app.
Given that we are in the final episodes of Game of Thrones I decided to create a Game of Thrones Note taking app. The premise of the app is to generate a page filled with different character cards in which you, the user, could then populate with comments/notes about your favorite characters.
The app contains two pre-seeded models; Posts and Comments.
So far I was able to create a new Character Card, populate it with a Name, Image, and Comment. The card would then append to the page and display alongside the pre-seeded cards. I had the Create and Read of C.R.U.D. and now needed to implement the final elements. I incorporated buttons to Update and Destroy the Character Cards. Next, I needed to append the pre-seeded text from the Comments Model. This proved more difficult than I had anticipated. I created my fetch request to the appropriate source but was unable to target the specific values and send them to my next function in order to append them to the Comment section of my Character Card. After several hours of frustration, my classmate (s/o Mera) suggested that I try accessing the seeded Comments through my Posts model within the console, and then slapping the new attribute on the end of my PostSerializer and it worked! I could now access my Posts comments (plural) and append them to the card.
I was now able to create new Comments and append them to the character cards through my comments section and scroll through the text. This is by no means an ideal way of taking notes and keeping track of them, but for my first SPA, it'll do.
I had gotten my project to work, but I had no clue how I did it. Classic. I decided to look into Serializers since I hadn't even heard of them before this project. So first off:
If our apps utilize JSON through its API, it is a popular means of handling the JSON. Make sure your application has the
gem 'active_model_serializers' gem in your
Gemfile and if not, add it and run
For the purpose of our posts and comments data, we need to establish serializers with attributes we want to be serialized, as shown in the Posts Serializer above. Now, when I went looking for additional information I came across several examples explicitly stating the relationships between the models within the Serializer. My project was working perfectly fine.. but was this how I was supposed to set it up, and what was the difference?
has_many relationship was only stated within my models so I went to my instructors looking for further clarification. After digging into the Serializer gem (which is a necessary component of running a Serializer), we found that when you serialize something through attributes it becomes an
Attribute instance. When you serialize something through
belongs_to it becomes a
Reflection instance. Both of these inherit from the
Field class, which holds the basic
value methods. The
Reflection has additional features however, such as the
link feature that has the ability to generate a link to the specifically related object, not just its attributes.
- Everything we are sending from the server to the web page is just data.
- It needs to be formatted correctly so that we can access it appropriately
- Your Serializer is an incredibly helpful tool that provides a great deal of utility in structuring a JSON response from your Rails API
- The quick and easy way to do it is to simply add another attribute to your Serializer file, but if you want fuller functionality, you should implement your relationships to establish a
Reflectioninstance rather than the
If you only need data from inside the associated objects, as I did, the
Attribute instance works just fine.
Level up every day