How to display attributes of belongsTo object in Ember.js template

Question

In my Ember app, a survey belongsTo a user; a user hasMany surveys. In my template, I would like to display a list of surveys, and the name of the user that created them. For now, I am pushing side-loaded data into the store via the application route, and it is showing up in the ember inspector->Data. The survey info is displaying correctly in the template, but the corresponding user's firstName will not appear. Help/guidance appreciated.

survey.js (model)

import DS from 'ember-data';

export default DS.Model.extend({
  user: DS.belongsTo('user', {async: true}), //tried without async as well
  title: DS.attr(),
  post: DS.attr()
});

user.js (model)

import DS from 'ember-data';

export default DS.Model.extend({
  surveys: DS.hasMany('survey', {async: true}),  
  firstName: DS.attr()
});

application.js (application route)

export default Ember.Route.extend({
  model() {
    this.store.push({
      data: [{
        id: 1,
        type: 'survey',
        attributes: {
          title: 'My First Survey',
          post: 'This is my Survey!'
        },
        relationships: {
          user: 1
        }
      }, {
        id: 2,
        type: 'survey',
        attributes: {
          title: 'My Second Survey',
          post: 'This is survey 2!'
        },
        relationships: {
          user: 1
        }
      }, {
        id: 1,
        type: 'user',
        attributes: {
          firstName: 'Tyler'
        },
        relationships: {
          surveys: [1, 2]
        }
      }]
    });
  }
});

surveys.js (route)

export default Ember.Route.extend({
  model () {
    return this.store.findAll('survey');
  }
});

surveys.hbs (template)

<ul>
  {{#each model as |survey|}}
    <li>
      <strong>{{survey.title}}</strong> //This works
      <br>
      {{survey.post}}                   //This works
      <br>
      Author: {{survey.user.firstName}} //This does not work
    </li>
  {{/each}}
</ul>

SOLUTION - updated application.js

export default Ember.Route.extend({
  model() {
    this.store.push({
      "data": [      //Added double quotes throughout to conform to documentation
        {
          "id": "1",
          "type": "survey",
          "attributes": {
            "title": "My First Survey",
            "post": "This is my Survey!"
          },
          "relationships": {
            "user": {
              "data": {
                "id": "1",
                "type": "user"
              }
            }
          }
        }, {
          "id": "2",
          "type": "survey",
          "attributes": {
            "title": "My Second Survey",
            "post": "This is survey 2!"
          },
          "relationships": {
            "user": {
              "data": {
                "id": "1",
                "type": "user"
              }
            }
          }
        }
      ],
      "included": [
        {
          "id": "1",
          "type": "user",
          "attributes": {
            "firstName": "Tyler"
          } //no need to include user's relationships here
        }
      ]
    });
  }
});

Could you try {{log}}ing or outputting {{survey.user}} to see what's there? Also, I doubt if it makes any difference, but try using unique IDs across models. BTW, async should not make any difference in this case. — user663031
No luck with unique IDs. Thought the same on async. {{log survey.user}} gives: Class {ember1442901526467: null, __nextSuper: undefined, __ember_meta: Object}, looks like it's empty? — TylerShields

artych artych · Accepted Answer · 2015-09-22T07:23:49

Payload relationship part is not correct. Should be:

    relationships: {
      user: {
        data: {
          id: 1,
          type: 'user'
        }
      }
    }

Also I think "user" payload should be in "included" section. JSONAPISerializer api

How to display attributes of belongsTo object in Ember.js template

1 Answers