Backbone Collection adding empty object when API returns no data

Question

I have the following problem: My API returns null - no data available. (that's good!). My collection gets the data but creates one single empty object.

My API result (from Firebug):

{"data":{"objects":null}}

My collection:

var MyCollection = Backbone.Collection.extend({
    model: MyModel,
    url: '/v1/ajax/load-objects',

    parse: function(resp, xhr) {
        return resp.data.objects;
    }
});

When I print self.model.toJSON() in my view (the model is the collection), I get this (by Firebug):

 [Object {}]

My question: Why is the collection putting one empty bject in my collection? The API returns null, so it should be empty.

I tried adding default values to my model (which the collection uses), they are not shown. So I guess it's taking the null as the data for one object. How can I stop him doing this?

Thx

Ron

Answer 1

If you poke around Backbone's source code, you'll see that models inside a collection are handled by Collection.set

Once Collection.set has parsed your data, it performs a check on what you actually returned and creates an array if the value (null in your case) is not an array :

var singular = !_.isArray(models);
models = singular ? [models] : models.slice();

This list of models is then processed and creates a single model in your collection.

The solution is simple : return an empty array when you hit a null value in parse :

var MyCollection = Backbone.Collection.extend({
    model: MyModel,
    url: '/v1/ajax/load-objects',

    parse: function(resp, xhr) {
        return resp.data.objects || [];
    }
});

And a demo simulating your problem http://jsfiddle.net/nikoshr/s2dve9ob/ and its solution : http://jsfiddle.net/nikoshr/s2dve9ob/1/