parse nested json to backbone collections

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?

Do you want to parse three separate collections, each of which contains for example all the entities, for example `Layer`s from all `Sequence`s? Or a nested model structure where each `Sequence` has a `Layers` sub collection? — jevakallio, Jan 16 '13 at 13:55

jevakallio · Accepted Answer · 2013-05-07T06:39:58.007

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.

parse nested json to backbone collections

1 Answers1