Error loading belongsTo relationship in Ember 2

Question

I am having issues loading a belongsTo relationship - no errors get displayed, and no requests sent. The UI just remains blank. Given the following models:

project.js import DS from 'ember-data';

export default DS.Model.extend({
    name: DS.attr(),
    items: DS.hasMany('line-item', {async: true}),  
    customer: DS.belongsTo('customer', {async: false})  
});

customer.js

import DS from 'ember-data';

export default DS.Model.extend({
    name: DS.attr(),
    email: DS.attr(),
    projects: DS.hasMany('project', {async: true})  
});

The relationship between project and customer exists. When accessing the projects endpoint, the project gets correctly returned:

{  
   "data":{  
      "type":"projects",
      "id":"3861b834-e270-4296-b7be-9aca55676874",
      "attributes":{  
         "created":"2016-04-27T22:36:01.061349Z",
         "modified":"2016-04-27T22:36:01.061477Z",
         "name":"Sample name",
      },
      "relationships":{  
         "customer":{  
            "data":{  
               "type":"customers",
               "id":"9242bd41-6bb0-41ed-b5f3-21df26486d9e"
            }
         },
         "items":{  
            "meta":{  
               "count":0
            },
            "data":[  

            ]
         }
      }
   }
}

However when trying to access the customer, nothing happens (with nothing I mean: no console output, no request to the customers endpoint etc. The UI just fails to load):

this.get('project').get('customer');

Accessing other attributes works (including the project's items).

Any idea as to where I am going wrong?

I believe since the relationship is async, then the get is returning a promise. `project.get('customer').then((customer) => { // now we can work with the customer });` — snewcomer, Apr 27 '16 at 23:36
Thanks snew. Unfortunately this doesn't work - the problem seems to be `project.get('customer')` - this is where it fails. — JB2, Apr 28 '16 at 00:34
No, nothing - there is no return value. It seems to fail somewhere in trying to get the customer. — JB2, Apr 28 '16 at 19:10
So a couple things. Is the json you posted above from the network tab in Chrome when you visit a route or just by simply accessing the API? Also, could you post your route code? — snewcomer, Apr 29 '16 at 03:01
Thanks snew. The json comes from the network tab. I will update my question with the route. — JB2, Apr 30 '16 at 19:49

score 2 · Accepted Answer · answered Apr 30 '16 at 17:05

In your project model you defined customer as async: false, which means it should be provided when loading the projects from your server. From the json output you provided the customer data is missing.

So either include the customer record when returning the json from your server or make customer async: true, so it will get loaded when calling project.get('customer')

Error loading belongsTo relationship in Ember 2

1 Answers1