javascript undefined error, but alert toSource shows the object exists

Question

I grabbed a bit of code to do some paging with jQuery, via Luca Matteis here http://stackoverflow.com/questions/516754/paging-through-records-using-jquery

I've made some edits to the paging script so that I can use the same code to provide paging of different content in different locations on the same site.

For the most part, I think it works, except that I get a jsonObj is undefined error in firebug. When I use alert(jsonObj.toSource()), I am shown the variables that I am trying to populate, but at the same time, the script dies because of the error. I can't figure out why I am getting this conflict of 'undefined' and yet I can easily out put the 'undefined' values in an alert. I can even say alert(jsonObj.name), and it will give me that value, but still launch an jsonObj is undefined error.

Here's the code I'm using

var pagedContent = {
data: null
,holder: null
,currentIndex : 0
,init: function(data, holder) {
    this.data = data;
    this.holder=holder;
    this.show(0); // show last
}
,show: function(index) {
    var jsonObj = this.data[index];
    if(!jsonObj) {
        return;
    }
    var holdSubset='';
    for(i=0;i<=4; i++){
    jsonObj=this.data[index+i];
    this.currentIndex = index;
    if(this.holder=='div#firstList'){
    var returnedId = jsonObj.id;
    var returnedName = jsonObj.name;
    var calcScore=this.data[index+i].score/this.data[0].score*100;
    var resultInput="<div ' id='"+returnedId+"'><div class='name'>"+returnedName+"</div><div class='score'><div style='width:"+calcScore+"%;'></div></div>";
    } 
    if(this.holder=='div#secondList'){
    var name=jsonObj.name;
    var city=jsonObj.city;
    var region=jsonObj.state;
    var resultInput='<li><div>'+name+'</div<div>'+city+'</div><div>'+region+'</div></li>';
    }
    holdSubset= holdSubset+resultInput;
    }

    jQuery(this.holder).html('<br/>'+holdSubset);

  if(index!=0){
    var previous = jQuery("<a>").attr("href","#").click(this.previousHandler).text("< previous");
   jQuery(this.holder).append(previous);
   }

    if(index+i<this.data.length){
     var next = jQuery("<a style='float:right;'>").attr("href","#").click(this.nextHandler).text("next >");
    jQuery(this.holder).append(next);
    }
}
,nextHandler: function() {
    pagedContent.show(pagedContent.currentIndex + 5);
    return false;
}
,previousHandler: function() {
    pagedContent.show(pagedContent.currentIndex - 5);
    return false
}
};

I call the function like this

pagedContent.init(json.users.locations, 'div#secondList');

The json looks like this

{"locations" : [ {"id":"21319","name":"Naugatuck American Legion","city":"Ansonia","region":"Connecticut"},{"id":"26614","name":"Studio B789","city":"Acton","region":"Maine"},{"id":"26674","name":"Deering Grange Hall","city":"Bailey Island","region":"Maine"},{"id":"27554","name":"Accu Billiards","city":"Acushnet","region":"Massachusetts"}]}

Answer 1

If you are using console.log to trace the problems in firebug you might find that it is a problem with firebug. Try just running console.log on it's own.

If it is a problem with firebug try updating it. There are some development versions around which might fix the problem.

I had a similar problem and fixed it by doing the above.

Answer 2

I may have found the problem with your code:

for(i=0;i<=4; i++){
    jsonObj=this.data[index+i];
    (...)

When you call show(0) you set index to 0. You expect a fixed number of items in the array (5 in the range [0..4]) but there are only 4 locations in your data.