ember data not loading belongsTo model

Question

I am using ember 2.8.0 and ember-data 2.8.0. I have the following models defined:

//app/models/store.js
import DS from 'ember-data';

export default DS.Model.extend({
    name: DS.attr('string'),
    floor: DS.belongsTo('floor'),
    number: DS.attr('string'),
    phone: DS.attr('string'),
    email: DS.attr('string'),
    photo: DS.attr(),
    createdAt: DS.attr('date'),
    updatedAt: DS.attr('date')
});

//app/models/floor.js
import DS from 'ember-data';

export default DS.Model.extend({
    name: DS.attr('string'),
    stores: DS.hasMany('store'),
    createdAt: DS.attr('date'),
    updatedAt: DS.attr('date')
});

My router.js has the following routes:

//app/router.js
this.route('stores', function() {
    this.route('new');
    this.route('edit');
});

My templates/stores/index.hbs has the following {{#each}} statement:

<tbody>
      {{#each model as |store|}}
       <tr>
           <td>{{store.name}}</td>
           <td>{{store.number}}</td>
           <td>{{store.floor.name}}</td>
           <td>{{store.phone}}</td>
           <td>{{store.email}}</td>
           <td>{{moment-format store.createdAt}}</td>
           <td>{{moment-format store.updatedAt}}</td>   
       </tr>
       {{/each}}
</tbody>

I would have expected that the line {{store.floor.name}} would have made a request to /floors/{id} for each and every row in the table.

What am I missing? What's the proper way to handle that in Ember?

Should my api return something different than the below?

[{"id":1,"floorId":1,"name":"McDonalds","number":"10-A","phone":"(11) 2020-3455","email":"[email protected]","photo":null,"createdAt":"2016-09-15T13:45:32.000Z","updatedAt":"2016-09-15T13:45:32.000Z"}]

Should I use other model hooks to load the associated model manually?

The attribute names of your store model need to match what the server gives you, unless you have defined some special processing for them in adapters/serializers/somewhere (I forget where exactly this happens, now), which seems unlikely. So, return floor instead of floorId and things may just begin to work. — Thernys
spot on @Thernys, thank you! Interestingly, changing what my api returns fixes it, however, changing my model's property name from floor to floorId doesn't. Would that be some ember-data convention thingy? Also, care to answer the question? — Andre Gallo
Also found where you can customize the processing as you mentioned @Thernys: guides.emberjs.com/v2.8.0/models/customizing-serializers/… — Andre Gallo
@user2105103 nope, since ember 2.x this is the default behavior. — Lux

Lux Lux · Accepted Answer · 2016-09-15T18:45:02

The way ember-data expects the data from your backend depends on your serializer. You didn't specified which serializer you use, so I can not tell you what it expects. But the format that is expected by ember-data internally is jsonapi. So for your case this would be right:

{
  "data": [
    {
      "id": "1",
      "type": "store",
      "attributes": {
        "name": "McDonalds",
        "number": "10-A",
        "phone": "(11) 2020-3455",
        "email": "[email protected]",
        "photo": null,
        "createdAt": "2016-09-15T13:45:32.000Z",
        "updatedAt": "2016-09-15T13:45:32.000Z"
      },
      "relationships": {
        "floor": {
          "data": {
            "type": "floor",
            "id":"1"
          }
        }
      }
    }
  ]
}

Make sure that your serializer returns this format for your backend response.

ember data not loading belongsTo model

2 Answers