Can't access lazy loaded relationships

Ember Data
1

I’ve been staring at this for hours and am getting nowhere :frowning:

I am using the JSONAPIAdapter with a JSONAPI compliant API.

When the route is hit the data is being loaded successfully to both User and Code models, but when I try to access the relation in a template, the data from User is presented but I can’t get to anything in Code

My models look like:

// app/models/code.js

export default DS.Model.extend({
    // Attributes

    title:      DS.attr('string'),
    created_at: DS.attr('date'),
    updated_at: DS.attr('date'),
    
    // Relationships
    users: DS.hasMany('user', {async: true})
    
});

//app/models/user.js

export default DS.Model.extend({
    // Attributes

    first_name:   DS.attr('string'),
    last_name:    DS.attr('string'),
    phone:   DS.attr('number'),
    created_at:   DS.attr('date'),
    updated_at:   DS.attr('date'),

    // Relationships

    codes: DS.hasMany('code', {async: true})
    
});

My route looks like:

// app/pods/users/index/route.js

export default Ember.Route.extend({
    model() {
        return this.store.query('user', {include: 'codes'});
    }
});

My template looks like:

// app/pods/users/index/template.hbs

<ul>
            {{#each model as |user|}}
                <li>
                {{user.first_name}}
                    <ul>
                        {{#each user.codes as |code|}}
                            <li>{{code.title}}</li>
                        {{/each}}
                    </ul>
                </li>

            {{/each}}
            </ul>

I feel like I’m doing something wrong with the way I’m access the codes, but all the guides I find are from ~2014…

Would be awesome if anyone had some pointers on where to look from here?

2

What do your network requests look like? Verify that they’re doing what you expect and calling the correct end-points.

3

I’ll get a dump of a standard payload, but I do know that in ember inspector I can see both the User and Code Ember Data models populated after the request.

4

This is an example payload:

GET http://localhost:8080/users?include=codes

{
  "data": [
    {
      "id": "823",
      "type": "users",
      "attributes": {
        "email": "jjames@example.com",
        "first_name": "Jim",
        "last_name": "James",
        "logged_in_at": null,
        "created_at": "2015-06-28 16:14:35",
        "updated_at": "2015-11-29 13:14:15",
        "deleted_at": null
      },
      "links": {
        "codes": {
          "linkage": [
            {
              "id": "1",
              "type": "codes"
            },
            {
              "id": "2",
              "type": "codes"
            }
          ]
        }
      }
    },
    {
      "id": "824",
      "type": "users",
      "attributes": {
        "email": "jsmith@example.com",
        "first_name": "John",
        "last_name": "Smith",
        "logged_in_at": null,
        "created_at": "2015-12-14 14:11:46",
        "updated_at": "2015-12-14 14:11:46",
        "deleted_at": null
      },
      "links": {
        "codes": {
          "linkage": [
            {
              "id": "2",
              "type": "codes"
            }
          ]
        }
      }
    },
  ],
  "included": [
    {
      "id": "1",
      "type": "codes",
      "attributes": {
        "title": "JJAMES",
        "created_at": "2015-11-13 00:00:00",
        "updated_at": "2015-11-13 00:00:00",
        "deleted_at": null,
        "type": "codes"
      }
    },
    {
      "id": "2",
      "type": "codes",
      "attributes": {
        "title": "JSMITH",
        "created_at": "2015-11-13 00:00:00",
        "updated_at": "2015-11-13 00:00:00",
        "deleted_at": null,
        "type": "codes"
      }
    }
  ]
}
5

Additionally, when I echo out the relationship directly ie {{model.codes}}, I get <DS.PromiseManyArray:ember762>

Does that look normal?

6

Yeah. that seems normal, as the relationship is async. If you grab the ‘content’ property, you’ll see the array.