Uncaught RangeError: Item index is out of range error in WebSQL Query Results

Question

I am trying to print the results to my Select statement into a list in my HTML. I am using Web SQL (This is a requirement for the project) to store my tables.

My Select Statement:

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM games', [], function (tx, results) {
                  var len = results.rows.length;
                  for (i=0; i <= len; i++){
                      $('#scores ul').append('<li><span class="alley">' + results.rows.item(i).alley + '</span><br><span class="date">' + results.rows.item(i).date + '</span></li>');
                  }
                });


});

When I run my code, it properly displays all the records for the games table in the list, but I am getting an "Uncaught RangeError: Item index is out of range" error on this line:

$('#scores ul').append('<li><span class="alley">' + results.rows.item(i).alley + '</span><br><span class="date">' + results.rows.item(i).date + '</span></li>');

Any insight on this would be greatly appreciated

Answer 1

It's because you're checking the length of the rows, not the items. So the count of rows is throwing off the loop, and it could be going over the amount of items in the array.

Changing

 var len = results.rows.length;

Into

 var len = results.rows.item.length;

Should do the trick