Ember JS - Unable to loop through an array returned from the model even though it is an array?

Question

I have two Ember JS models (in an Ember CLI application):

list
link

Each list can have multiple links and as a result, I've declared my list model as:

import DS from 'ember-data';

export default DS.Model.extend({
    title       : DS.attr('string'),
    slug        : DS.attr('string'),
    visibility  : DS.attr('string'),
    owner       : DS.attr('string'),
    links       : DS.hasMany('link')
});

This is what the link model looks like:

import DS from 'ember-data';

export default DS.Model.extend({
    title   : DS.attr('string'),
    shortUrl: DS.attr('string'),
    views   : DS.attr('number'),
    owner   : DS.attr('string')
});

Within the list.js route, I make a call to fetch the list and its links like this:

model: function(params) {
        // Get list properties and links
        var list = this.store.find('list', params.listName);

        return list;
    },

The REST adapter correctly makes the call and my server returns the following response:

{
  "lists": [
    {
      "title": "Design",
      "slug": "design",
      "visibility": "private",
      "owner": "5540b2fb9611f67a07f7f6c1",
      "id": "5565ae05ca217589bc2a1bdf",
      "links": [
        1,
        2,
        3
      ]
    }
  ],
  "links": [
    {
      "id": 1,
      "title": "Dribbble - Show and tell for designers",
      "shortUrl": "http://sl.fi/a1CRgc",
      "views": 144,
      "owner": "5540b2fb9611f67a07f7f6c1"
    },
    {
      "id": 2,
      "title": "Dribbble - Show and tell for designers",
      "shortUrl": "http://sl.fi/a1CRgc",
      "views": 144,
      "owner": "5540b2fb9611f67a07f7f6c1"
    },
    {
      "id": 3,
      "title": "Dribbble - Show and tell for designers",
      "shortUrl": "http://sl.fi/a1CRgc",
      "views": 144,
      "owner": "5540b2fb9611f67a07f7f6c1"
    }
  ]
}

I modeled my response based on the Ember Data Model Maker. I have a list template that should loop through the links in the model so I am doing this:

{{#each links in model}}
    <span>{{ links.title }}</span>
{{/each}}

I get the following error when I load my application and I just can't seem to figure out a solution:

Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed <web-app@model:list::ember388:5565ae05ca217589bc2a1bdf>

Can someone please help me with a solution?

Grapho · Accepted Answer · 2015-05-27 13:26:35Z

1

links is a child relation to lists, the links array becomes a property on lists...

therefore your each helper should be:

{{#each link in model.links}}

also, you will want to start using the new syntax soon too.. (depending on your ember version):

{{#each model.links as |links|}}

answered May 27, 2015 at 13:26

Grapho

1,65415 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

JackH Over a year ago

Thank you! This worked! Not sure why I couldn't find answers to this anywhere. Also, how would I access the list properties returned in the response JSON using Handlebars in a template? I would like to show the list title that you see in the JSON above. I tried looping through the list array too but it didn't show up on the page.

Grapho Over a year ago

{{#each model as |list|}} will loop through your model array (if it is an array) and you can access title with list.title

JackH Over a year ago

I tried that but it doesn't work! When I script my server to send back lists as an array, Ember throws an error saying it wants an object: Error while processing route: list Assertion Failed: Expected an object as data. When I pass an object, I can't loop through it.

Grapho Over a year ago

ah ok... because of this: this.store.find('list', params.listName) ember is expecting a single object record from the server.. not an array.. that is why. and you cant loop over an single object only an array.

Grapho Over a year ago

just try {{model.owner}}

|

Collectives™ on Stack Overflow

Ember JS - Unable to loop through an array returned from the model even though it is an array?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related