[SOLVED] Fetching and working with nested relationships with JSONAPIAdapter

Ember Data
1

Hi,

i have a problem with fetching nested relationships from JSONAPI compilant API, beacuse i can’t access (returned value is undefined) second level relation. Of course i returned appropriate data in included field in JSON response (you can see response below).

Model relation looks like:

user <=> employee <=> person

while {{user.employee.department}} works great, code like {{user.employee.person.id}} returns undefined.

Also, in Ember Inspector i can see that person model is available (and have data), so why ember doesn’t use it? Where is the problem? Maybe in API response or my misunderstanding of Ember Data and/or JSONAPI(Adapter)?

Adapter used: JSONAPIAdapter

Versions:

Ember: 2.3.0
Ember Data: v2.3.2
jQuery: 2.1.4

Files:

app/models/user.js

import DS from 'ember-data';

export default DS.Model.extend({
    city: DS.attr("string"),
    ordering: DS.attr("number"),
    nId: Ember.computed("id", function() {
        return parseInt(this.get("id"));
    }),
    employee: DS.belongsTo("employee")
});

app/models/emplyee.js

import DS from 'ember-data';

export default DS.Model.extend({
    department: DS.attr(),
    occupation: DS.attr(),
    person: DS.belongsTo("person")
});

app/models/person.js

import DS from 'ember-data';

export default DS.Model.extend({
    firstName: DS.attr(),
    lastName: DS.attr(),
    email: DS.attr(),
    phone: DS.attr()
});

app/routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return {
            user: this.store.findAll("user")
        };
    }
});

app/adapters/application.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
    host: 'http://localhost:8000',
    namespace: 'api/v1',
    headers: {
        "X-Requested-With": "XMLHttpRequest"
    }
});

response from API

{
  "data": [
    {
      "type": "user",
      "id": 1,
      "attributes": {
        "city": "Warsaw",
        "ordering": 1
      },
      "relationships": {
        "employee": {
          "data": {
            "type": "employee",
            "id": 1
          }
        }
      }
    }
  ],
  "included": [
    {
      "type": "people",
      "id": 1,
      "attributes": {
        "first-name": "John",
        "last-name": "Doe",
        "email": "mail@example.com",
        "phone": 123456789
      }
    },
    {
      "type": "employee",
      "id": 1,
      "attributes": {
        "department": "Office",
        "occupation": "Occupation"
      },
      "relationships": {
        "employee": {
          "data": {
            "type": "user",
            "id": 1
          }
        },
        "people": {
          "data": {
            "type": "people",
            "id": 1
          }
        }
      }
    }
  ]
}

app/templates/components/user-item.hbs

// ...

<td>
    {{user.employee.person.firstName}}
</td>
<td>
    {{user.employee.person.id}}
</td>

// ...
2

In your response you have a "people": { data: { type: "people", id: 1 } } but in your model definition you called the relation person. So probably your JSON should be "person": { data: { type: "people", id:1 } }.

This is because the property is called person, but the person then is from the type “people” and has the id 1.

1 Like
3

You are right!

Thank you very much. Problem solved.