How to get actual array from ember model? - ember.js

Question

I have a model with a hasMany relationship:
var Bus = DS.Model.extend({
model: DS.attr('string'),
passengers: DS.hasMany('passenger', {async: true})
});
This seems to work, in that I am able to iterate through the passengers in my template.
Now I want to have an action in my controller that will do something with the passengers. It involves some business logic, and I'll need to iterate through the list of passengers.
My problem is that when I get the passengers from the model in the controller, it is not an array, it is some sort of object. How do I get an array from this object?
Here's what I have tried:
export default Ember.ObjectController.extend({
actions: {
start: function() {
var bus = this.get('model');
var passengers = model.get('passengers');
passengers.then(function(passengerArray) {
var stuff = passengerArray.get('content');
console.log('The thing that I wish were an array of passengers',passengerArray);
console.log('The type of that thing',typeof(passengerArray));
});
}
}
});
It gives me the type object, and it is clearly something wrapped in emberness in a way that is inscrutable to me.

Answer 1

what's the output in the console of a console.log(passengerArray) if you use a decent browser you will get more than just object and actually beeing able to get informations on your object.
Some how when you use model.get("passengers") you get a PromiseArray of your "passengers" . using then is the correct way to get the datas, you will get an object which implements Ember.Array as the parameter of the function called in the then.
If you want a " raw js Array" you can get it by using passengerArray.toArray() function, if your goal is to iterate or get the lenght or what ever you can use the methods provided by emberArray => http://emberjs.com/api/classes/Ember.Array.html
And as you can see in the documentation above content property is at least not public or may even not exist :) (you can also try a passengerArray.get("[]")) to retrieve the "content"

Answer 2

Apart from if it is required/desirable. This would do:
var bus = this.get('model');
var passengersPromise = bus.get('passengers');
passengersPromise.then(function(passengers) {
console.log('RecordArray', passengers);
var passengerArrayWithRecords = passengers.toArray();
console.log('array with records', passengerArrayWithRecords);
var passengerArray = passengers.map(function(record) {
return record.toJSON();
});
console.log('plain array with javascript objects', passengerArray);
});
See it in action here: http://emberjs.jsbin.com/mapiyafaxa/2/edit?html,js,output
Reference:
Ember.Map: http://emberjs.com/guides/enumerables/#toc_map
DS.RecordArray: http://emberjs.com/api/data/classes/DS.RecordArray.html

Answer 3

What you are getting is a promise, since its an async relation. to access the actual array just do:
bus.get('passengers').then(function(passengers) {
// passengers is the actual array
});

Answer 4

When I tried it out using fixtures (so data is already in the store), I was able to get the array using
var bus = this.get('model');
var passengers = model.get('passengers').get('currentState');
I was then able to use passengers[0].get('content') (which is what I assume you want(?)). My guess is that for fetching the data from the server, you will want to use
var bus = this.get('model');
var passengers = model.get('passengers');
passengers.then(function(passengerArray) {
var passengerContent = passengerArray.get('currentState')[0].get('content')
});