Unable to iterate over collection with Backbone.js

Question

I am very new to backbone and I am trying to troubleshoot an error in someones code. The problem is that I have a collection that I cant seem to iterate over. If I put a break point prior to the each loop, I can see that the collection exists but the loop will still not iterate over it. Here is the code that I have. Again, I am new to backbone, so if there is any qualifying information you need, please let me know:

var ReportsListView = ActivityDBView.extend({   

    render: function() {      
        this.collection.each(function(report) {
            console.log(report.get('canEdit'));
            console.log(report.get('programSpecific'));
        }, this);


    },
    drawReportList: function(reports, title, includeEditLinks) {

});

But, if I add this before render:

  initialize: function() {
  },

It will sometimes work. When it does work, I can iterate over the list but all the gets return undefined. I don't know why I cannot iterate over the list or why the code behavior is inconsistent. Could this be due to the Async nature or that there is some kind of race?

Any help would be great.

have you put the breakpoint on the line `console.log(report.get('canEdit'));`? — Akos K, Oct 22 '13 at 13:16
Your `initialize` method may override the existing one, therefore stop that from being called. Does `ActivityDBView` have the `initialize` method? — Yaroslav, Oct 22 '13 at 13:26
Hello, Yes I realized I was using the debug wrong. So, the list is being iterated over but the values are coming up as undefined. Any Ideas? — jason, Oct 22 '13 at 13:26

score 0 · Answer 1 · answered Oct 22 '13 at 13:27

0

When it doest not work, it's probably because your collection is not yet fetched, so you should fire the render after the collection has been fetched (it triggers a reset event that you have to listen to).

initialize : function() {
    this.listenTo(this.collection, 'reset', this.render, this);
},

For the undefined property, I would try first to log the entire model so you can check what it has.

console.log(report);

answered Oct 22 '13 at 13:27

Puigcerber

9,814
6
40
51

Hello and thanks for the response. So, it looks like I was using the debugger wrong. But, even though i can iterate over the list, the gets are coming back as undefined. I did try to log the report object. Although it prints out quite a bit about the object, I dont actually see anything about specific properties (canEdit or ProgramSpecific). – jason Oct 22 '13 at 13:45
Does the report object have a property named attributes? Inside of this one you should find canEdit or ProgramSpecific. But as I think the problem is somewhere else in the code. From where are you fetching the collection? An external API? Maybe you should debug first the collection definition. – Puigcerber Oct 22 '13 at 13:53
Yeah, I think it's an API. There is a property called Attributes but the expected fields are not there. Instead there are __proto__:, __defineGetter__, __defineSetter__, etc – jason Oct 22 '13 at 14:23
Can you post the code of your report model and your reports collection? – Puigcerber Oct 22 '13 at 14:45

Unable to iterate over collection with Backbone.js

1 Answers1