Custom serializers with Ruby on Rails for nested objects
Tags: rails, react, programming, beginners
Published: 2022-09-13 16:03:54

While creating my capstone project for the last week of coding bootcamp, one of the biggest initial challenges I faced was, per the project guidelines, creating a project with multiple many-to-many model relationships. After scouring my brain for ideas, I eventually settled on a concert tracking idea which would satisfy the requirements of the project. 

The concept made sense in my head and I knew which models were necessary to make this work. The process of generating the models, assigning them macro associations, and testing those associations in the Rails console was seamless and I was very content with the idea I had settled into. However, it wasn't until I actually began making API requests from my front-end to the back-end model controllers in order to handle my data in React that I realized I was not getting the specific key:value pair objects I needed in order to make this work. The join table between my three main models was only giving me the id of an object, rather than the values of the object itself. I knew this would require some sort of serialization but just didn't know how to go about doing it. 

Basically, my models consisted of Bands, Venues, and Dates, all associated with one another through the join table of Concerts. A band has many venues through concerts, a venue has many dates through concerts, so on and so forth. My intention was to create a concert tracking app which would display a list of concerts with information such as the date, the band playing, and the venue which is hosting said concert. The problem for me was, the Concert object which held all of this pertinent information, necessary for rendering the particular details of my project, only held the id for each of these objects when handling the data in React. 

My fetch to back end server in order to receive access to this Concert object was returning a promise in the form of:

```javascript
{date_id: 4, venue_id: 12, band_id:7}
```

While it made sense to seed my data in the backend to represent the object we see above in order to create the join table, in a perfect world, for the purpose of easier accessibility through javascript object dot notation, I wanted my object to look more like this:

```javascript
{date: "10/23/2022, venue: "CrossRoadsKC", band: "BROCKHAMPTON}
```

After playing around with the serialization for the Bands and Venues and Dates models, my solution looked somewhat like this:

```ruby
def all_concerts
    self.object.concerts.map do |each_concert|
      {"concert_date": each_concert.concert_date, "concert_venue": each_concert.venue, "concert_band": each_concert.band }
    end
  end
```

Basically all I did here was create a custom object which allowed me to directly name a key and assign that key the relevant value I needed. It does this by taking an instance of self, which is the particular object executing the current code - in our case, either a Band, Venue, or Date - and maps over its nested concerts to perform a specific action. In this case, that action is taking each concert for that particular Band, Venue, or Date and assigning them keys and values that the concert join table had access to through its belongs_to association. 


The object "band_concerts" would then show up as a nested object to my bands each time i made an API request to the backend, giving me the exact object I needed when handling my data on the front end, with easy access and pertinent information for each of the models I was working with.