Backbone.js collection fetch, can't retrieve items

Question

I'm new to Backbone.js, I'm following a tutorial trying to adapt it to my needs.
I'm calling the fetch method from the main app view in order to retrieve multiple objects to be inserted in the collection. I can see in chrome that the json data are returned, the fetch functions returns success but the collection is not populated.

I'm using IcanHaz for rendering. It prints out only the default model as I defined it in the Job model.

 var Job = Backbone.Model.extend({
   defaults: {
        title: 'Not specified',
        status: 0,
        created_at: 'Not specified'
    }
 });


var JobView = Backbone.View.extend({
   render: function () {
        // template with ICanHaz.js (ich)
        this.el = ich.jobRowTpl(this.model.toJSON());
        return this;
    }
});

// define the collection of jobs
var JobCollection = Backbone.Collection.extend({
    model: Job,
    url: '/api/1.0/jobs/'
});


// main app, the collection view
var AppView = Backbone.View.extend({
    tagName: 'tbody', 

    initialize: function() {
        this.jobs = new JobCollection();
        this.jobs.on('all', this.render, this);
        this.jobs.fetch({
                           error: function () {
                             console.log("error!!"); 
                           },
                           success: function () {
                              console.log("no error"); 
                           }
                        }).complete(function () {
                            console.log('done');
                            console.log('length1:' +  this.jobs.length);
                        });
       console.log('length2: '+ this.jobs.length);
    },

    render: function () {
        this.jobs.each(function (job) {
            var tmpjob = new JobView({model: job}).render().el;
            $(this.el).append(tmpjob);
            console.log('job': + this.tmpjob);
        }, this);

        return this;
    }


});

var app = new AppView();
$('#app').append(app.render().el);

In the Chrome console I get this:

length2:0
job:undefined 
no error 
done 
Uncaught TypeError: Cannot read property 'length' of undefined //referring to the lenght1 logging

These are the data that I fetch, from the chrome inspector under network/xhr/response:

{"count": 2, "next": null, "previous": null, "results": [{"id": 1, "title": "testAlbum", "status": 0, "created_at": "2012-12-31"}, {"id": 2, "title": "testAlbum2", "status": 0, "created_at": "2012-12-31"}]}

I don't understand why the 'jobs' collection exists after calling the fetch method but it is undefined inside the fetch block when the 'success' helper has been called.

And why the collection is not being populated despite it returns success and the json data are returned from the server?

I'm quite lost.

score 4 · Accepted Answer · edited Jan 08 '13 at 03:21

4

Add a parse method to your collection that just returns the results arrays. A collection needs to be an array of models, not your whole JSON response.

The Backbone docs explain how to use parse.

edited Jan 08 '13 at 03:21

Colin Brock

21,267
9
46
61

answered Jan 08 '13 at 02:48

ericponto

736
4
8

Thank you, that worked! Any hint why my collection object has still length equal to zero and why it is undefined when I try to access it from the success handler function within the fetch method? This is still the result of my console: `length2:0 job:undefined job:undefined no error done Uncaught TypeError: Cannot read property 'length' of undefined` – Leonardo Jan 08 '13 at 12:20
1

A couple things maybe. One, `this` inside of the `complete` callback is not going to be a reference to the view. You could save of a reference to `this` in a var. I'd need to check on this, but I'm not positive the collection will be updated quite when the fetch is complete. It may be better just to listen for the `change` event on the collection. – ericponto Jan 08 '13 at 15:02
You are right on the `this` keyword. It was sufficient to assign `var that=this;` and inside the function passed to the complete one using it like so: `console.log('length1:' + that.jobs.length);`. Also the length2 logging is equals to 0 because all the js code will be executed in sequence but the fetch call is asynchronous so when I try to `console.log('length2:' + this.jobs.length);` the collection is still empty because the fetch function hasn't completed yet. It makes sense, thank you! – Leonardo Jan 08 '13 at 22:56

Backbone.js collection fetch, can't retrieve items

1 Answers1