EmberJS - Assertion failed: The value that #each loops over must be an Array. You passed (generated application controller)

Question

I'm struggling to get my model's fixture data to render to my template, I receive the error above when I try an each loop in my template:

{{#each}}
    {{title}}
{{/each}}

I have set up my router like so:

Application.Router.map(function() {
    this.resource('application', { path: '/' });
});

Application.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('applicationmodel');
    }
});

And my model is setup like so:

Application.ApplicationModel = DS.Model.extend({
    title: DS.attr('string')
});

Application.ApplicationModel.FIXTURES = [
    {
        id: 1,
        title: 'title-1'
    },
    {
        id: 2,
        title: 'title-2'
    }
];

Can anyone tell me what I'm doing wrong?

Thanks

Answer 1

Try this:

{{#each content}}
   {{title}}
{{/each}}

and

App.ApplicationController = Ember.ArrayController.extend({}) 

Application.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('applicationModel');
    },
    setupController: function(controller, model) {
        controller.set('content', model);
    }
});

EDIT: To elaborate as per @Andy Hayden's request in the comments:

The error (EmberJS - Assertion failed: The value that #each loops over must be an Array. You passed (generated application controller)) gives us two clues:

1. Whatever we are trying to loop over is not an Array. From the template we can see that we are looping over the content property of our controller. Thus it looks like we don't have an ArrayController set up and we are dealing with an ObjectController. You could confirm this by using Ember Inspector

2. Where does the controller come from? Ember will auto generate controllers for us if it needs one and we don't explicitly define it. We can see that that is, in fact, what happened, by looking at the error message (generated application controller). Ember wouldn't know if we want to represent a single object or an array, so it generated an ObjectController for us. If we explicitly define up an ApplicationController of type ArrayController, Ember will use our controller instead of generating one itself.

Answer 2

You're getting this error because the controller that your template is looping through is not enumerable - Ember is generating an ApplicationController for you automatically because you didn't specifically define one.

Simply declare an ApplicationController like the following:

App.ApplicationController = Ember.ArrayController.extend()

Answer 3

Did you find an answer to this? Are you using Ember AppKit? If so, I just had this problem (which is how I ended up on SO) and it ended up being a file naming thing.

For example, in our other (non-EAK) Ember apps I would normally put PostsController inside a file named posts_controller.js. EAK doesn't seem to like that; it wants you to put it in posts.js, and if it doesn't find it, it won't return an ArrayController, so the template doesn't have anything to {{#each}} over.

Both my co-worker and I were bitten by this problem in our (different) EAK apps. We tracked it down by noticing that the console logging was reporting a generated controller when we had expected it to be loading the controller we had specified.

Answer 4

If none of the other answers help, you might have mistyped the template name or the attribute of your handlebars script tag.

Check your index.html and make sure the <script> tag has the attibute data-template-name="application"

Should be something like this:

<script type="text/x-handlebars" data-template-name="application">

Answer 5

Application.Router.map(function() {
    this.resource('application', { path: '/' });
});

Application.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('application');
    }
});

And my model is setup like so:

Application.Application = DS.Model.extend({
    title: DS.attr('string')
});


Application.Application.FIXTURES = [
    {
        id: 1,
        title: 'title-1'
    },
    {
        id: 2,
        title: 'title-2'
    }
];

Try making the above changes. Specifically, remove 'model' from the names and make sure there isn't a space before FIXTURES.

{{#each app in model}}
     {{app.title}}
{{/each}}

And then use model, since it's the model property that you're iterating over.