Ember Data relationships not resolved

Question

I'm still learning ember.js and have run into a roadblock with ember data not resolving lookup relationships in models. I have one model 'site' that will be basically a lookup table for every other model to differentiate data based on location.

At this point, I'm doing something wrong or missing a key concept - probably both... (or maybe it's the wee hour!)

Site Model (i.e. the lookup table)

import DS from 'ember-data';

export default DS.Model.extend({
    code: DS.attr(),
    name: DS.attr(),
});

The site model would have a hasMany relationship to all my other models (will be about 12 when complete)

Associate Model

import DS from 'ember-data';
import { belongsTo } from 'ember-data/relationships';

export default DS.Model.extend({
    site: belongsTo('site'),
    last: DS.attr(),
    first: DS.attr(),
    active: DS.attr('boolean'),

fullName: Ember.computed('first', 'last', function() {
  return `${this.get('first')} ${this.get('last')}`;
  }),
});

The 'associate model' will also be a lookup along with 'site' in some other models.

I'm providing data via the JSON API spec but I'm not including the relationship data because as I understand it, ember data it should be pulling down the site data using the site id attribute.

{
    "links": {
        "self": "/maint/associates"
    },
    "data": [
        {
            "type": "associate",
            "id": "1",
            "attributes": {
                "site": "6",
                "last": "Yoder",
                "first": "Steven",
                "active": "1"
            },
            "links": {
                "self": "/associates/1"
            }
        }
    ]
}

In my template file I'm referencing associate.site which gives me an error.

<(unknown mixin):ember431>

If I use associate.code or .name to match the site model, nothing will show in the template. The code from the 'site' table is the data I really want to displayed in the template.

So the obvious questions:

Am I wrong that Ember Data should be resolving this or do I need to include the relationship in my API response?
I realize that my belongsTo in the 'associate' model only references site while I want site.code, so how do I make that relationship known or access the field in my 'associate' model?
I didn't include hasMany relationship in the 'site' model because there would be many. Do I need to do an inverse relationship in other models? Examples I've seen don't all show the hasMany relationships setup.
When I look at the models in ember inspector the site field is not included in the model. Even if I wasn't getting the correct data should it still show up?

I like ember so far, just need to understand and get over this roadblock

Update: My backend JSON library would only generate relationship links based on the current spec which would be

"related": "/streams/1/site"

but ember data does call

"related": "/sites/1"

to resolve the relationship

So @Adam Cooper answer is correct if you generate links as he answered or if you can only generate the links based on the current specification.

Adam Cooper Adam Cooper · Accepted Answer · 2017-03-16T09:43:15

If you're using the JSONAPIAdapter, which is the default, you want your response to look this:

{
  "links": {
    "self": "/maint/associates"
  },
  "data": [{
    "type": "associate",
    "id": "1",
    "attributes": {
      "last": "Yoder",
      "first": "Steven",
      "active": "1"
    },
    relationships: {                  
      "site": {
        "links": {  
          related: "/sites/6"
        }
      } 
    }
  }]
}

That will allow Ember Data to look up the site via its relationship. Right now Ember is trying to access the site model which Ember Data can't populate hence the error you're getting. As an aside you could probably do with returning an actual boolean value for active too.

Ember Data relationships not resolved

1 Answers