Object Associations In OO Javascript

I’ve just finished my fourth project for Flatiron School’s Software Engineering Bootcamp. Up until this point in the bootcamp we were exclusively working in Ruby, but in this fourth phase we transitioned to working in Javascript. Aside from showcasing fundamentals around DOM manipulation and function usage, a large goal of this project was to create a front-end using object-oriented Javascript.

When dealing with any OO programming, the ways in which the objects interact is paramount. Coming from Ruby and using Activerecord to associate objects with one another, achieving similar data interaction using Javascript took some getting used to.

Building The Objects

Current iterations of Javascript make it easy enough to build data into Javascript objects, and create an OO environment. Using the class keyword, and the constructor method any model can be easily set up as a Javascript object.

class Item {
  static all = []
  constructor({id, name, image, price, url, bought, roster_id}){
   this.id = id
   this.name = name
   this.image = image
   this.price = price
   this.url = url
   this.bought = bought
   this.roster_id = roster_id
   Item.all.push(this)
 }

Once this is set up any data that you want to fetch can then be instantiated as a new Javascript object.

fetch(`${this.endpoint}/items`)
.then(resp => resp.json())
.then(items => {
  items.forEach(item => {
    return new Item(item)
  })

Setting Up Associations

Programmatically setting up the associations for this project was still very simple. I still used Rails in order to create the back-end so it was as easy as including has_many and belongs_to inside my models on the back-end, as well as including a foreign key in the database table. But then I needed to decide how the models would be interacting on the page in which I was using Javascript in order to achieve my DOM manipulation. I had an Items model that belongs_to a Roster model. The page would initially load all the Rosters, then when you click on a particular Roster you would then only see its associated Items. Additionally a form to create a new Item would be on the Items page, and upon creation that new Item would need to be associated with the Roster you were currently inside.

Accessing The Correct Data

Since Items belongs_to a Roster, Items have a roster_id. So in order to make sure the associations were working properly, I needed to have access to the right Rosters Id at the right time. When a Roster is clicked, I have a callback function that is clearing out the Roster data and fetching the correct Items data.

function handleItems(){
  if(event.target.id === "roster-title"){
    this.innerHTML = ""
    Roster.rosterForm.innerHTML = ""
    let roster = event.target.parentElement.parentElement.id
    Item.renderForm(roster)
    Item.backToRoster()
    Item.header(roster)
    itemService.getItems(roster)
  }
}

The key to this function as it pertains to associations is the roster variable that’s being declared, and assigned the value of the parent div that has the id of that particular Roster. By doing this I was then able to pass that data to the other functions that actually request the Item data and create new Items.

Using The Data To Append Objects

Having access to the Roster Id now made it easy enough to filter out the correct Items and then append those to the DOM.

const filteredItems = Item.all.filter(item => {
  return item.roster_id === parseInt(rosterId)
})
filteredItems.forEach(item => {
  item.appendItemHTML()
})

Similarly in order to create new Items I was able to just plug the rosterId into the Item object getting passed into the fetch post request callback.

const itemObj = {
  name: document.getElementById('name').value,
  image: document.getElementById('image').value,
  price: document.getElementById('price').value,
  url: document.getElementById('url').value,
  roster_id: rosterId
}

Javascript OO

Even though it was a little bit of a challenge figuring out how to achieve the same results I had gotten in Ruby in a new way with Javascript, it was a really powerful learning experience. Seeing how concepts are similar, but achieved in different ways in different languages really expanded my thinking of programming overall. Being able to work in multiple languages and translate concepts will surely be an invaluable skill entering this field.