Looping over an ArrayController fails as it is not an Array even though the Controller has the correct model with data

Question

I am attempting to use an ArrayController to handle displaying some data that will be swapped out on user clicks. I currently get this error, Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed App.CurrentListController but If I look at Ember Inspector I can see the CurrentListController and it has the model and the data in it. Basically the Stat page lets you see a bunch of stats and clicking on a specific stat pops up a modal and shows all the record that relate to that stat. If I just store the records on the StatController it works fine but then I cant sort/filter using the ArrayController. So it all works except for when I try and display the contents of CurrentListController it freaks out.

Thanks for any help or direction.

CurrentListController:

App.CurrentListController = Ember.ArrayController.extend({
    sortProperties: ['name'], //Initial sort column.
    sortAscending: true,
});

StatController:

App.StatController = Ember.ObjectController.extend({
    needs:['currentList'],
    currentList:[],

    actions: {
        viewBusiness: function(ids) {
            console.log(ids)
            var self = this
            console.log(this.get('controllers.currentList').get('sortProperties'))
            this.store.findByIds('business', ids.split(",")).then(
                function(results)
                {
                    $('#editModal').modal('show');
                    //self.set('currentList', results.sortBy(["name"]))
                    self.get('controllers.currentList').set('model', results)

                    console.log(self.get('controllers.currentList').get('arrangedContent'))
                });
        },
        sortBy: function(prop){
            var clController = this.get('controllers.currentList')
            clController.set('sortProperties', prop)
            clController.set('sortAscending', !clController.get('sortAscending'));
        }
    }
});

Stat Template:

{{#each business in App.CurrentListController}}
  <tr {{bind-attr id=business.id}}>
    <td>{{business.name}}</td>
    <td>{{business.city}}</td>
    <td>{{business.state}}</td>
    <td>{{business.zip}}</td>
    <td class="text-center">{{business.numVendors}}{{/link-to}}</td>
    <td class="text-center">{{business.numClients}}{{/link-to}}</td>
  </tr>
{{/each}}

Lazybensch Lazybensch · Accepted Answer · 2014-12-26T08:51:01

App.CurrentListController is not an array. It's an object, a controller object. (btw it is not recommended to access the global namepsace [ ie. using anything with an uppercase letter ] in your template)

What you should do instead is:

App.StatController = Ember.ObjectController.extend({
    needs:['currentList'],
    currentList: Ember.computed.alias('controllers.currentList.model'),
    ...

This way you can access the underlying model of your currentList controller (which is an array) and make it available to your template as currentList.

{{#each business in currentList}}
  ...
{{/each}}

Looping over an ArrayController fails as it is not an Array even though the Controller has the correct model with data

1 Answers