Iterating over Ember.js ember-data Record Arrays

Question

I've been beating my head against this problem all day, and I feel like I'm close to a solution but just can't quite make it happen. I'm using Ember.js with Ember-Data and the Fixtures adapter, eventually migrating to a REST adapter. The basic problem is this: I have Sites and Supervisors, with a many-to-many relationship. I want to present the user with a select box for their existing site/supervisor pairings, sorted by site, ie:

• Site 1 - Supervisor 1
• Site 1 - Supervisor 2
• Site 2 - Supervisor 1 (remember, many to many)
• Site 2 - Supervisor 3

I need to wrangle these two resources into a single array that I can pass to a view which inherits (or will inherit) from Ember.Select. Currently I'm attempting this with a method on the Supervisors controller which I'm calling "flat", because it will return a flattened array representing these relationships. The controller is shown below. I'm using .find().then() to process the data after the promise has been fulfilled. The data that I get back appears to contain all four of my fixtures, but when I try any of the enumerable methods on them (notably forEach), it behaves as if it has only returned the first object. I have tried iterating over the data object as well as data.get('content'). I'm quite new to Ember, so maybe I'm going about this the wrong anyway, but regardless this seems very strange to me. Here's my code:

App.SupervisorsController = Ember.ArrayController.extend({
  flat: function(){
    return App.Supervisor.find().then(function(data){
      var c = data.get('content') ;
      console.log(c) ;    // <-- logs an object containing four records,
                          //     with attribute "length" showing 4
                          //     Great! (see below for log output)

      console.log(c[0]) ; // <-- logs first record. Great!
      console.log(c[1]) ; // <-- undefined (?!)
      console.log(c[2]) ; // <-- undefined (?!)
      console.log(c[3]) ; // <-- undefined (?!)
      console.log(c.get('length')) ; // <-- 1 (not four?!)

      return c ; // <-- eventually this will return the newly constructed array
    }) ;
  }
}) ;

And here's the log output from the first console.log() call

0: Object
1: Object
2: Object
3: Object
__ember1376005434256: "ember325"
__ember1376005434256_meta: Meta
_super: undefined
length: 4
__proto__: Array[0]

Can you tell me what I'm missing here? I can't figure out how to access each of the four resulting supervisors.

Thanks!

Answer 1

It appears like you're accessing the models before they are finished loading (You can see this in the property, isUpdating). If you feel like lazily looking at this you can use ember run later to just see the items a wee bit later. Or you can set the model on the controller and render it and let ember update the view when the models are finished loading...

 Ember.run.later(function(){
    data.forEach(function(item){
    console.log(item);
   });
 }, 2000);



 App.ApplicationRoute = Ember.Route.extend({
   activate: function(){
     this.controllerFor('supervisors').set("model", App.Supervisor.find());
   }
 });

http://jsbin.com/ijiqeq/12/edit

Good luck with Ember!

 someArray: function(){
   var arr = Ember.A();
   this.get('model').forEach(function(item){
     item.get('sites').forEach(function(site){
       arr.pushObject(someObject); //some object that is represents each specific combination
     });
   });
 }.property('model')