parse nested json to backbone collections - json

Question

I'm just starting with Backbone and I'm running into a problem. I have a nice restful setup. For most of my GET request I receive a single collection of models, but for one I am loading nested relational data, which creates nested JSON.
In Backbone I have the following Models:
App.Models.Sequence = Backbone.Model.extend({});
App.Models.Layer = Backbone.Model.extend({});
App.Models.Item = Backbone.Model.extend({});
and these collections
App.Collections.Sequences = Backbone.Collection.extend({
model: App.Models.Sequence,
url: '/api/sequences/'
});
App.Collections.Layers = Backbone.Collection.extend({
model: App.Models.Layer,
url: '/api/layers'
});
App.Collections.Items = Backbone.Collection.extend({
model: App.Models.Item,
url: '/api/items'
});
I load data as JSON:
[
{
"id": "1",
"project_id": "8",
"name": "Seq1",
"layers": [
{
"id": "1",
"name": "Layer11",
"sequence_id": "1",
"items": [
{
"id": "1000000",
"layer_id": "1",
"itemtype_id": "1",
"position": "0"
},
{
"id": "1000001",
"layer_id": "1",
"itemtype_id": "2",
"position": "0"
},
{
"id": "1000002",
"layer_id": "1",
"itemtype_id": "2",
"position": "0"
},
{
"id": "1000003",
"layer_id": "1",
"itemtype_id": "4",
"position": "0"
}
]
},
{
"id": "2",
"name": "Layer12",
"sequence_id": "1",
"items": [
{
"id": "1000004",
"layer_id": "2",
"itemtype_id": "1",
"position": "0"
},
{
"id": "1000005",
"layer_id": "2",
"itemtype_id": "2",
"position": "0"
},
{
"id": "1000006",
"layer_id": "2",
"itemtype_id": "3",
"position": "0"
},
{
"id": "1000007",
"layer_id": "2",
"itemtype_id": "4",
"position": "0"
}
]
},
{
"id": "3",
"name": "Layer13",
"sequence_id": "1",
"items": [
{
"id": "1000008",
"layer_id": "3",
"itemtype_id": "1",
"position": "0"
},
{
"id": "1000009",
"layer_id": "3",
"itemtype_id": "4",
"position": "0"
},
{
"id": "1000010",
"layer_id": "3",
"itemtype_id": "5",
"position": "0"
}
]
}
]
},
{
"id": "2",
"project_id": "8",
"name": "Seq2",
"layers": [
{
"id": "4",
"name": "Layer21",
"sequence_id": "2",
"items": []
},
{
"id": "5",
"name": "Layer22",
"sequence_id": "2",
"items": []
}
]
},
{
"id": "3",
"project_id": "8",
"name": "Seq3",
"layers": [
{
"id": "6",
"name": "Layer31",
"sequence_id": "3",
"items": []
},
{
"id": "7",
"name": "Layer32",
"sequence_id": "3",
"items": []
}
]
}
]
How can I get Sequences, Layers and Items into my collections?

Answer 1

You can use a combination of underscore's flatten and pluck to do this neatly:
var data = { /* your JSON data */ };
var allSequences = _.clone(data);
var allLayers = _.flatten(_.pluck(allSequences, 'layers'));
var allItems = _.flatten(_.pluck(allLayers, 'items'));
var sequences = new App.Collections.Sequences(allSequences);
var layers = new App.Collections.Layers(allLayers);
var items = new App.Collections.Items(allItems);
If you don't want Sequences and Layers to contain their child objects, override Model.parse to trim them. For example:
App.Models.Sequence = Backbone.Model.extend({
parse: function(attrs) {
delete attrs.layers;
return attrs;
}
});
And initialize/add the collection with the parse:true option:
var sequences = new App.Collections.Sequences(allSequences, {parse:true});
Et cetera.