Access hasMany/belongsTo relationship data with JSONAPI

[danilovaz]

Hey guys! Can you help me, please?

I have a model Channel, a model Feature, a model ChannelApplication and a model ApplicationFeature. And I defined them like this:

My model channel.js:

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { hasMany } from 'ember-data/relationships';

export default Model.extend({
  name: attr('string'),
  key: attr('string'),
  multiplePages: attr('boolean'),
  features: hasMany('feature', { async: true })
}); 

My model feature.js:

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { hasMany } from 'ember-data/relationships';

export default Model.extend({
  name: attr('string'),
  key: attr('string'),
  applicationFeatures: hasMany('application-feature', { async: true }),
  channels: hasMany('channel', { async: true })
});

My model channel-application.js:

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

export default Model.extend({
  name: attr('string'),
  clientId: attr('string'),
  channel: belongsTo('channel'),
  applicationFeatures: hasMany('application-feature', { async: true })
});

My model application-feature.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo } from 'ember-data/relationships';

export default Model.extend({
  scope: attr('string'),
  connectType: attr('string'),
  channelApplication: belongsTo('channel-application', { async: true }),
  feature: belongsTo('feature', { async: true })
});

I’m using JSONAPI. And in my route I do this:

model() {
    return Ember.RSVP.hash({
      profiles: this.store.findAll('profile'),
      channels: this.store.findAll('channel'),
      channelApplications: this.store.query('channel-application', { filter: { feature: 'inbox'} })
   })
}

So, in my template I need to get my ChannelApplications and for each one I need to know Channel related with this ChannelApplications and know each ApplicationFeature.

{{#each channelApplications as |channelApplication|}}
    {{channelApplication.id}}
    
    // I think in something like this, but this doesn't work of course
    {{#each channelApplication.channels as |channel|}}
       <span>{{channel.id}}</span>
       <span>{{channel.name}}</span>
       {{#each channelApplication.applicationFeatures as |applicationFeature|}}
          <span>{{applicationFeature.id}}</span>
          <span>{{applicationFeature.name}}</span>
        {{/each}}
    {{/each}}

{{/each}}

channelApplication.applicationFeatures and channelApplication.channels returns nothing.

When I print {{channelApplication.applicationFeatures.length}} it return 0.

When I print {{channelApplication.applicationFeatures}} it prints a <DS.PromiseManyArray>

JSONAPI return for channelApplications: this.store.query('channel-application', { filter: { feature: 'inbox'} }):

{
   "data":[
      {
         "type":"channel-applications",
         "id":"2",
         "attributes":{
            "name":"Application1",
            "channel-id":1,
            "client-id":"123"
         },
         "relationships":{
            "application-features":{
               "data":[
                  {
                     "type":"application-features",
                     "id":"3"
                  }
               ]
            }
         }
      },
      {
         "type":"channel-applications",
         "id":"4",
         "attributes":{
            "name":"Application2",
            "channel-id":2,
            "client-id":"456"
         },
         "relationships":{
            "application-features":{
               "data":[
                  {
                     "type":"application-features",
                     "id":"7"
                  }
               ]
            }
         }
      },
      {
         "type":"channel-applications",
         "id":"5",
         "attributes":{
            "name":"Application3",
            "channel-id":3,
            "client-id":"001"
         },
         "relationships":{
            "application-features":{
               "data":[
                  {
                     "type":"application-features",
                     "id":"9"
                  },
                  {
                     "type":"application-features",
                     "id":"10"
                  },
                  {
                     "type":"application-features",
                     "id":"11"
                  },
                  {
                     "type":"application-features",
                     "id":"12"
                  }
               ]
            }
         }
      }
   ],
   "included":[
      {
         "type":"application-features",
         "id":"3",
         "attributes":{
            "channel-application-id":2,
            "feature-id":3,
            "scope":"teste1, teste2, teste3",
            "connect-type":"script"
         }
      },
      {
         "type":"application-features",
         "id":"7",
         "attributes":{
            "channel-application-id":4,
            "feature-id":3,
            "scope":"",
            "connect-type":"redirect"
         }
      },
      {
         "type":"application-features",
         "id":"9",
         "attributes":{
            "channel-application-id":5,
            "feature-id":1,
            "scope":"teste4, teste5",
            "connect-type":"redirect"
         }
      },
      {
         "type":"application-features",
         "id":"10",
         "attributes":{
            "channel-application-id":5,
            "feature-id":2,
            "scope":"",
            "connect-type":"password"
         }
      },
      {
         "type":"application-features",
         "id":"11",
         "attributes":{
            "channel-application-id":5,
            "feature-id":3,
            "scope":"",
            "connect-type":"password"
         }
      },
      {
         "type":"application-features",
         "id":"12",
         "attributes":{
            "channel-application-id":5,
            "feature-id":4,
            "scope":"",
            "connect-type":"password"
         }
      }
   ]
}

So, someone know about anything I’m doing wrong, please?