Accessing Ember data has-many relationship on template - ruby-on-rails

Question

I have a rails back-end, serving data as per the JSON API standards (jsonapi-resources gem). I have two models: Contact and PhoneNumber.
class Contact < ApplicationRecord
has_many :phone_numbers
end
class PhoneNumber < ApplicationRecord
belongs_to :contact
end
This is the JSON response for the API endpoint.
{
"data": [
{
"id": "6",
"type": "phone-numbers",
"links": {
"self": "http://localhost:3000/phone-numbers/6"
},
"attributes": {
"name": "byeworld",
"phone-number": "9212098"
},
"relationships": {
"contact": {
"links": {
"self": "http://localhost:3000/phone-numbers/6/relationships/contact",
"related": "http://localhost:3000/phone-numbers/6/contact"
}
}
}
}
]
}
These are my Ember models:
for contact:
import DS from 'ember-data';
export default DS.Model.extend({
nameFirst: DS.attr('string'),
nameLast: DS.attr('string'),
email: DS.attr('string'),
twitter: DS.attr('string'),
phoneNumbers: DS.hasMany('phone-number', {async: true, inverse: 'contact'})
});
for phone-number:
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
phoneNumber: DS.attr('string'),
contact: DS.belongsTo('contact', {async: true, inverse: 'phoneNumbers'})
});
This is my route handler:
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.findRecord('contact', params.contact_id, {include: "phone-numbers"});
},
(...)
});
I am unable to access the phone-numbers for a contact on the template by doing:
{{#each model.phoneNumbers as |phone|}}
{{phone.name}}
{{/each}}
Also, the data for the phone-numbers exists in the ember console. What am I missing?

Answer 1

There is open known issue in ember-data version 2.14.3. so please downgrade your ember-data version to 2.13.2 . that might solve your issue.
Refer this ember-data open issue - https://github.com/emberjs/data/issues/4942

Answer 2

model.PhoneNumbers => model.phoneNumbers
If this is not just this typo, try extending your model serializer / adapter from the JSON API adapters / serializers (or do it on you application serializer / adapter if all your models use it):
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({});
and:
import JSONAPISerializer from 'ember-data/serializers/json-api';
export default JSONAPISerializer.extend({});