Ember: Access sideloaded model relationship data in template

Question

I am trying to display a model's relationships in a template from sideloaded data, but there seems to be some problem. With Ember Inspector, I see that the relationships are correctly loaded from the data. However, the data is not displayed on the page.

Looking for solutions or suggestions on where to start debugging. Much appreciated.

Handlebars:

<dt>Categories</dt>
<dd>
  <ul>
    {{#each model.categories as |category| }}
      <li>{{ category.name }}</li>
    {{/each}}
  </ul>
</dd>

The route:

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model(params) {
    return this.store.findRecord('datasheet', params.id);
  }
});

The models:

// app/models/datasheet.js
export default DS.Model.extend({
  name: DS.attr('string'),
  name_en: DS.attr('string'),
  news: DS.attr('string'),
  news_en: DS.attr('string'),
  basic_information: DS.attr('string'),
  basic_information_en: DS.attr('string'),
  id_gradient_default: DS.attr('string'),
  icon_name: DS.attr('string'),
  icon_color: DS.attr('string'),
  order: DS.attr('string'),
  item_count: DS.attr('string'),

  categories: DS.hasMany('category')
});

// app/models/category.js
export default DS.Model.extend({
  name: DS.attr('string')
});

This is the JSON returned from the adapter method:

{
    "data": {
        "type": "datasheet",
        "id": "21",
        "attributes": {
            "name": "Projekty",
            "name_en": "Projects",
            "news": "",
            "news_en": "",
            "basic_information": "",
            "basic_information_en": "",
            "id_gradient_default": "27",
            "icon_name": "pin_flag",
            "icon_color": "",
            "order": "14"
        },
        "relationships": {
            "categories": ["18", "19", "20", "51", "52"]
        }
    },
    "included": [{
        "type": "category",
        "id": "18",
        "attributes": {
            "name": "Project"
        }
    }, {
        "type": "category",
        "id": "19",
        "attributes": {
            "name": "Activity"
        }
    }, {
        "type": "category",
        "id": "20",
        "attributes": {
            "name": "Project phase"
        }
    }, {
        "type": "category",
        "id": "51",
        "attributes": {
            "name": "Program"
        }
    }, {
        "type": "category",
        "id": "52",
        "attributes": {
            "name": "Milestone"
        }
    }]
}

Ember Inspector screenshot:

Try define it like this categories: DS.hasMany('category', {async: true, inverse: null}) — Keo

Lux Lux · Accepted Answer · 2016-01-26T15:33:18

This is not correct JSONAPI:

 "relationships": {
   "categories": ["18", "19", "20", "51", "52"]
 }

This is the correct JSONAPI equivalent:

"relationships": {
  "categories": {
    data: [{
      id: '18',
      type: 'category'
    },{
      id: '19',
      type: 'category'
    },{
      id: '20',
      type: 'category'
    },{
      id: '51',
      type: 'category'
    },{
      id: '52',
      type: 'category'
    }]
  }
}

So your data are loaded but not correctly linked. you can see this in the ember-inspector when you check the categories relationship.

Ember: Access sideloaded model relationship data in template

1 Answers