How to sideload ember hasMany and belongsTo Relationship? - ember.js

Question

I have a Person Model as follows
App.Person= DS.Model.extend({
id: DS.attr('string'),
name: DS.attr('string'),
visits: DS.hasMany('App.Visit'),
events: DS.hasMany('App.Event') ,
allergies: DS.hasMany('App.Allergies'),
get_allergies : function(){
return this.get('allergies').getEach('allergy_name').reduce(function(accum, item) {
return (accum.length > 0) ? (accum +', '+ item) : (item);
}, '');
}.property('allergies.#each.allergy_name')
});
App.Visit = DS.Model.extend({
visit_id: DS.attr('string'),
date: DS.attr('date'),
admission: DS.belongsTo('App.Admission')
});
App.Admission = DS.Model.extend({
loc: DS.attr('string'),
admission_date: DS.attr('date'),
care_team: DS.belongsTo('App.CareTeam')
});
As you can see Person hasMany "allergies", and along with person, allergies is also getting loaded for me because in the UI I am calling the get_allergies method while other hasMany relationships like "visits" and "events" are not getting loaded.
In UI {{person.get_allergies}}
I tried to sideload the relationships "visits" and "events"(using example on net), but that is not working? Can someone tell what is the proper way of sideloading ember-data because I couldnt find any proper documention with example on net except for few questions on stackoverflow itself?

Answer 1

According to the documentation, you should just add additional Visit and Event data in the response from the server.
{
"person": {
"id": 1,
...
"event_ids": [5, 6, 7]
},
"events": [{
"id": 5,
...
},
{
"id": 6,
...
},
{
"id": 7,
...
}]
}
The main point here is that Events data should be outside of Person data.
Do you use the standard REST adapter? Could you please add a sample json returned by the server?

Answer 2

To sideload data in my app, I configure ember-data to know about the kinds of things I'll be sideloading. E.g. to sideload events and visits, do this:
DS.RESTAdapter.configure('App.Event', {
sideloadsAs: 'events'
});
DS.RESTAdapter.configure('App.Visit', {
sideloadsAs: 'visits'
});
App.Store = DS.Store.extend({
revision: 11
});
and then in your json can look like this:
{
"person": {
"id": 1,
"event_ids": [5, 6, 7],
"visit_ids": [1, 2, 3]
},
"events": [
{ "id": 5 },
{ "id": 6 },
{ "id": 7 }
],
"visits": [
{ "id": 1 },
{ "id": 2 },
{ "id": 3 }
]
}

Answer 3

I had the same problem but set up a bit different. visits were unaware of their person (i.e. couldn't do visit.get('person.name')). I had to add a serializer for visit:
export default AppSerializer.extend({
attrs: {
person: 'personId'
},
});
My payload looks like this:
{
person: {
id: 1,
name: 'John',
visitIds: [1, 2, 3]
},
visits: [
{ id: 1,
personId: 1
},
{ id: 2,
personId: 1
},
{ id: 3,
personId: 1
}
]
}
person model:
export default DS.Model.extend({
name: DS.attr('string'),
visits: DS.hasMany('visit')
});
visit model:
export default DS.Model.extend({
person: DS.belongsTo('person')
});