How to set Backbone model to an objcet's child array?

Question

I've got an backbone app which gets data from json array and appends to the html, but when i try to change json data array to an object i coundn't manage to set related array to my model.

Note: i've took an example of the backbone structure from this website: http://bardevblog.wordpress.com/2012/01/16/understanding-backbone-js-simple-example/

Here is working code:

JSON

[
        {
            "id": 0,
            "title": "ABC",
            "list": [
                {
                    "type": 2,
                    "date": "21.9.2012"
                }
            ]
        },
        {
            "id": 1,
            "title": "CBA",
            "list": [
                {
                    "type": 2,
                    "date": "16.8.2013"
                },
                {
                    "type": 3,
                    "date": "30.9.2014"
                }
            ]
        },
]

Backbone:

var App = {
    Models: {},
    Collections: {},
    Views: {},
    Templates:{}
}

App.Templates.items = _.template($('#tmplt-projects').html());
App.Templates.item = _.template($('#tmplt-project').html());

App.Models.Items = Backbone.Model.extend({});

Collection & Views:

App.Collections.Items = Backbone.Collection.extend({
    model: App.Models.Items,
    url: 'json/app.json'
});
App.Views.Items = Backbone.View.extend({
    el: $('#projects'),
    template: App.Templates.items,

    initialize: function () {
        this.collection.on('sync', this.render, this);
    },

    render: function(){
        $(this.el).html(this.template());
        this.addAll();
    },

    addAll: function () {
        this.collection.each(this.addOne);
    },

    addOne: function (model) {
        view = new App.Views.Items({ model: model });
        $('#projects ol', this.el).append(view.render());
    }
});
App.Views.Item = Backbone.View.extend({
    tagName: 'li',
    className: 'row',
    template: App.Templates.item,

    render: function () {
        return $(this.el).append(this.template(this.model.toJSON())) ;
    }
});

Code doesn't work when i change array's structure to object and can not found a solution to work this thing.

{
    "attr1" : "3",
    "attr2" : "5",
    "items": [
        {
            "id": 0,
            "title": "ABC",
            "list": [
                {
                    "type": 2,
                    "date": "21.9.2012"
                }
            ]
        },
        {
            "id": 1,
            "title": "CBA",
            "list": [
                {
                    "type": 2,
                    "date": "16.8.2013"
                },
                {
                    "type": 3,
                    "date": "30.9.2014"
                }
            ]
        },
    ]
}

But i can not work this code when i try to convert json data like this, i want to set backbone model to items object and ignore other 2 objects. How can i set items array to model ?

addAll: function () {

        console.log(this.collection.models[0].attributes.items);
        // this returns me the array of items
        // but i can not set this to model
        this.collection.each(this.addOne);
},

Answer 1

You will need to add a parse function to your collection, so when the json returns from the server you return the items array (which is the array of model attributes to be added to the collection):

App.Collections.Items = Backbone.Collection.extend({
    model: App.Models.Items,
    url: 'json/app.json',
    parse: function(response) {
        return response.items;
    }
});

This way your collection should be initialized as with the previous json response, and attr1, attr2 should be ignored.