Deserialize Complex Model with Ember Data - ember.js

Question

I have a single call to the server that returns the whole data of my application
[
{
"id": 1,
"count": 0,
"canGroup": true,
"childs": {
"group": [
{
"id": 0,
"count": 3,
"canGroup": true,
"childs": {
"user": [
{
"id": 0,
"count": 3,
"canGroup": true
}
...
]
}
] ...
}
...
]
How can I do to deserialize this model with Ember Data?

Answer 1

There are two parts to this question. One is how to structure your model to represent this data, the second is how to modify the incoming data so Ember can handle it. The model, let's call it group, would be something like:
// models/group.js
export default DS.Model.extend({
count: DS.attr(),
canGroup: DS.attr(),
childs: DS.hasMany('group')
});
Now we need to tell Ember Data that the children are going to be coming in embedded inside the parent. To do that, we mix in DS.EmbeddedRecordsMixin into the serializer, and also specify an attrs hash, as follows:
// serializers/group.js
export default DS.RESTSerializer(DS.EmbeddedRecordsMixin, {
attrs: {
childs: { embedded: 'always' }
}
However, there is one remaining problem. By default, Ember Data will expect that the childs property contains an array of, well, children. Instead, your data has childs containing a group property which contains the array. We need to fix that up, which we will do by overriding normalize:
normalize(type, hash, prop) {
hash.childs= hash.childs.group;
return this._super(type, hash, prop);
}
});
There are other issues to worry about, including whether you want Ember Data to serialize the embedded children (when writing back to the server), but the above should be enough to get you started.
By the way, I notice you have two different groups with an id of 0. That is going to greatly confuse Ember Data. Try to have unique IDs. If that is not possible, you might consider synthesizing IDs with additional serializer logic.