Ember.js Parse Ember RecordArray

Did you know that data returned from the Ember Data store is of type Ember’s DS.RecordArray? How would we parse it? What if we wanted to manipulate it? No worries, I will show you how.

In this post, I will be using the `setupController` hook in a route to set my route properties.

entity: {
  accounts: [
    {
      name: 'one'
    },
    {
      name: 'two'
    }
  ]
}

To make it simple, lets assume our store returns an entity object with an accounts property that is an array of objects with its own properties.

So lets try to loop through this returned object shall we?

import Ember from 'ember';
export default Ember.Route.extend({
  model(params) {
    let { entity_id } = params
    return Ember.RSVP.hash({
      entity: this.get('store').findRecord('entity', entity_id)
    })
  },
  setupController(controller, model) {
    this._super(controller, model)
    let accounts = model.entity.get('accounts')
    // this works fine
    accounts.forEach((acc) => {
      console.log(acc.get('name'))
    })
  }
});

One quick note about Ember’s RecordArray is that instead of using the .operator to access a property of an object, you have to use the method get(‘objectName’) like how I used it in the code above.

What I did in the above code is, inside the setupController , I retrieved the accounts property from the entity object. Then, I loop through each accounts and logging it on the console.

Well by this logic, I should be able to loop through it using a regular for loop and accessing the array with the bracket [] notation right? So lets update our code to include a for loop.

import Ember from 'ember';
export default Ember.Route.extend({
  model(params) {
    let { entity_id } = params
    return Ember.RSVP.hash({
      entity: this.get('store').findRecord('entity', entity_id)
    })
  },
  setupController(controller, model) {
    this._super(controller, model)
    let accounts = model.entity.get('accounts')
    // but this doesnt work
    for (let i = 0; i < accounts.get('length'); i++) {
      console.log(accounts[i]) // this is undefined
    }
  }
});

Another quick note, Ember RecordArray has a built in property called length that we can access in order to get the length of an array. More information on this can be found here on Ember’s documentation.

So why did accounts[i] gives us back an undefined? This is because of the way Ember RecordArray is implemented under the hood. In order to access it like the way we are used to with regular arrays is by using their built in method for RecordArrays called objectAt(index) . So instead of using accounts[i], you will need to do accounts.objectAt(i) . For more information, you can go here to check their guide.

Once you use the objectAt(index) method, you can start accessing the object’s property the same old way you are used to like this accounts.objectAt(i).name .

This took me a while to figure out, but once I did, I was able to get back into my flow and progress with my project. Hope this help those of you who were in the same situation as me but could not figure it out! Bash your head against the wall and never give up!