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":"lapa@mcdonalds.com.br","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?

Answer 1

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": "lapa@mcdonalds.com.br",
        "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.

Answer 2

As initially (and naughtily) answered in the comments, the attribute names of your store model are expected to match what the server gives you, unless you have defined custom processing for them in your serializer . So, return floor instead of floorId and things may just begin to work.

I'm not entirely certain why it didn't work for you to change the attribute name to match server results instead ( floor: DS... => floorId: DS... ). As far as I can tell it should work that way as well (as in, when I tried just now). I like to take the PEBKAC approach, so with the limited information available I'm going to assume your test conditions simply may have been flawed. Perhaps you had already modified the server to return floor , which no longer matched the model's expectations. Maybe you forgot to change {{store.floor.name}} in your template to match new definitions. Maybe you just forgot to rebuild your project if using Ember-CLI.

^{_{Or maybe I just have no idea what I'm talking about and you should ask a new question if you care enough and have attempted to rule out user error.}}