Backbone (Marionette) fetch in a collection returns an empty array (nested models)

Question

I'm working with nested models and collections in Backbone (Marionette).

// Basic unit
Models.User = Backbone.Model.extend({});
Models.Users = Backbone.Collection.extend({ model: Models.User });

// A Group has a collection of Users
Models.Group = Backbone.Model.extend({
    initialize: function() {
        var users = new Models.Users(this.get("users"));
        this.set("users", users);
    }
});
Models.Groups = Backbone.Collection.extend({ model: Models.Group });

// An Organization has a collection of Groups
Models.Organization = Backbone.Model.extend({
    initialize: function() {
        var groups = new Models.Groups(this.get("groups"));
        this.set("groups", groups);
    }
});
Models.Organizations = Backbone.Collection.extend({ 
    model: Models.Organization, 
    url: "./data/data.json"
});

My understanding is that this.get will return an array of objects (as determined via the data.json file) and convert it to a Backbone Collection.

The data.json file has the following structure:

[{
    "id": "org1", 
    "groups": [{
        "id": "group1", 
        "users": [
            { "name": "Alice" }, 
            { "name": "Bob"  } 
        ]
    }, 
    {
        "id": "group2", 
        "users": [{ "name": "Charlie" }]
    }]
}, 
{
    "id": "org2", 
    "groups": [{
        "id": "groupA", 
        "users": [{ "name": "Eve" }]
    }, 
    {
        "id": "groupB", 
        "users": [
            { "name": "Linda" }, 
            { "name": "Mallory" } 
        ]
    }]
}]

I'm trying to populate the top-most collection (an Organization) with the data from data.json.

In index.html, I have:

<script type="text/javascript">
    $(document).ready(function() {
        MyApp.OrgManager.addInitializer(function() {
            var data = new MyApp.Models.Organizations();
            data.fetch({
                success: function(collection) {
                    console.log("Success", collection);
                }
            });
        });
        MyApp.start();
    });
</script>

fetch returns successfully, but the output of my console for the collection is an empty array. What went wrong?

dashik dashik · Accepted Answer · 2014-05-28T02:17:24

Solved it. Had to make sure that

I was running the page on a local webserver, since jQuery doesn't like null origin XMLHttpRequests, and
I had to _.bindAll a few things so that this had a proper context.

Backbone (Marionette) fetch in a collection returns an empty array (nested models)

1 Answers