EmberJS - Error: The item being looped over in #each must be an Array. You provided (application controller)

Question

EmberJS - Error: The item being looped over in #each must be an Array. You provided (application controller)

I'm having trouble displaying my model's fixture data on the template. When I attempt to use an each loop in the template, I encounter the error mentioned above:

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

This is how I've set up my router:

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

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

Here is how my model looks:

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

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

Could someone point out where I might be going wrong?

Appreciate any help!

javascript ember.js ember-data

Answer 1

Answer №1

Give this a try:

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

Additionally, you can use the following code snippets:

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);
    }
});

UPDATE: Providing more information as requested in @Andy Hayden's comment:

The error message (

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

) indicates two key points:

The item being looped over is not an Array. It appears we are looping through the content property of our controller, hinting at a missing ArrayController and using an ObjectController instead. This can be confirmed using the Ember Inspector
Where did the controller originate from? Ember will automatically generate controllers if needed but not explicitly defined. The error message (generated application controller) confirms this auto generation process. By defining an ApplicationController as an ArrayController, we can control the type of controller being used rather than relying on Ember's generated ObjectController.

Answer 2

Give this a try:

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

Additionally, you can use the following code snippets:

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);
    }
});

UPDATE: Providing more information as requested in @Andy Hayden's comment:

The error message (

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

) indicates two key points:

The item being looped over is not an Array. It appears we are looping through the content property of our controller, hinting at a missing ArrayController and using an ObjectController instead. This can be confirmed using the Ember Inspector
Where did the controller originate from? Ember will automatically generate controllers if needed but not explicitly defined. The error message (generated application controller) confirms this auto generation process. By defining an ApplicationController as an ArrayController, we can control the type of controller being used rather than relying on Ember's generated ObjectController.

Answer 3

Answer №2

The reason for this error is that the controller being iterated in your template is not enumerable. Ember automatically creates an ApplicationController for you if you haven't defined one explicitly.

To resolve this, you can create an ApplicationController by using the following code:

App.ApplicationController = Ember.ArrayController.extend()

Answer 4

The reason for this error is that the controller being iterated in your template is not enumerable. Ember automatically creates an ApplicationController for you if you haven't defined one explicitly.

To resolve this, you can create an ApplicationController by using the following code:

App.ApplicationController = Ember.ArrayController.extend()

Answer 5

Answer №3

Have you found a solution to this issue? Are you currently utilizing Ember AppKit? I recently encountered a similar problem while working on an EAK project and stumbled upon Stack Overflow seeking help.

In our previous Ember applications (not using EAK), I would typically name my controller file as posts_controller.js, containing PostsController. However, with EAK, it seems to prefer the file name posts.js. If it's not named correctly, EAK won't return an ArrayController, causing issues in the template rendering process.

My colleague and I faced this same issue in different EAK projects. We were able to identify the root cause by observing that the console was generating a controller instead of loading the one we had specified.

Answer 6

Have you found a solution to this issue? Are you currently utilizing Ember AppKit? I recently encountered a similar problem while working on an EAK project and stumbled upon Stack Overflow seeking help.

In our previous Ember applications (not using EAK), I would typically name my controller file as posts_controller.js, containing PostsController. However, with EAK, it seems to prefer the file name posts.js. If it's not named correctly, EAK won't return an ArrayController, causing issues in the template rendering process.

My colleague and I faced this same issue in different EAK projects. We were able to identify the root cause by observing that the console was generating a controller instead of loading the one we had specified.

Answer 7

Answer №4

In case the previous solutions don't work for you, it's possible that there was a typo in the template name or attribute of your handlebars script tag.

Double-check your index.html file to ensure that the <script> tag includes the correct attribute data-template-name="application"

The correct format should be:

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

Answer 8

In case the previous solutions don't work for you, it's possible that there was a typo in the template name or attribute of your handlebars script tag.

Double-check your index.html file to ensure that the <script> tag includes the correct attribute data-template-name="application"

The correct format should be:

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

Answer 9

Answer №5

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

App.AppRoute = Ember.Route.extend({
    data: function() {
        return this.store.find('app');
    }
});

And the structure of my entity looks like this:

App.App = DS.Model.extend({
    name: DS.attr('string')
});


App.App.FIXTURES = [
    {
        id: 1,
        name: 'name-1'
    },
    {
        id: 2,
        name: 'name-2'
    }
];

Please implement the modifications mentioned above. In particular, delete 'data' from the names and ensure there is no space before FIXTURES.

{{#each application in model}}
     {{application.name}}
{{/each}}

Lastly, utilize model, as it represents the model property that you are iterating through.

Answer 10

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

App.AppRoute = Ember.Route.extend({
    data: function() {
        return this.store.find('app');
    }
});

And the structure of my entity looks like this:

App.App = DS.Model.extend({
    name: DS.attr('string')
});


App.App.FIXTURES = [
    {
        id: 1,
        name: 'name-1'
    },
    {
        id: 2,
        name: 'name-2'
    }
];

Please implement the modifications mentioned above. In particular, delete 'data' from the names and ensure there is no space before FIXTURES.

{{#each application in model}}
     {{application.name}}
{{/each}}

Lastly, utilize model, as it represents the model property that you are iterating through.

EmberJS - Error: The item being looped over in #each must be an Array. You provided (application controller)

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

JavaScript, where services are injected like Angular's dependency injection

Ensure that a new window is opened while maintaining the exact location of the parent window

How do I specify the content-type as application/json when using the DELETE method with $resource in AngularJS?

Automatic closing of multile- vel dropdowns in Bootstrap is not enabled by default

Requiring Subclasses to Maintain Immutability

Showing the initials of a user at the top of an SVG using ReactJS

Having trouble with the Slide Menu Javascript functionality

Is there a way to trigger the activation of the datepicker during the `onLoad` event?

Is it possible to exchange a JavaScript array with JSON content in a Search Application?

What could be the reason for this JSON being considered "invalid"?

Transferring the jQuery modal variable value to a PHP script

Uploading Files Using JSON with Javascript and Jquery

Searching for columns should be at the top of an angular datatable, not at the bottom

A guide on adding an onClick listener to a span element dynamically and then saving it to MongoDB

Efficiently flattening an array in JavaScript using recursive functions without the need for loops

Learn how to retrieve the ID of an element with a simple click using PHP, jQuery, AJAX, and Javascript

"Simply tap on an element that has been dynamically inserted into the

Using Javascript to enable a button to perform multiple actions on an element

Even after defining routes, Node Express continues to throw a 404 error

What could be causing the error when attempting to retrieve an index using the window variable?