JS for loop not working

Question

I have a for loop which looks like this:

for (var i = 0; i < list.length; i++) {

It is looping through Firebase data in the database and returning all the data in the database.

However, I want it to only go up to the first 10 database items. So I changed the loop to:

for (var i = 0; i < 9; i++) {

But this fails to display any results when the there are less than 10 pieces of data in the database. However, if I set the number to however many objects I have in the database, for example 10 because I have 10 objects, it displays them all. But any less than this number and I just get a blank webpage.

Here is the webpage when I have 10 objects in my Firebase database:

And here it is when I remove one of those objects:

I have no idea why this is happening - The logic is correct - if i is less than 9 then display the data - But instead it only displays it when it equals 9.

Here is the full JS:

function refreshUI(list) {
var lis = '';
var lis2 = '';
var lis3 = '';
var lis4 = '';
    for (var i = 0; i <= 9; i++) {
        lis += '<li data-key="' + list[i].key + '" onclick="addText(event)">' + list[i].book + '</li>';
        lis2 += genLinks(list[i].key, list[i].book)
      };
      for (var i = 10; i < list.length; i++) {
        lis3 += '<li data-key="' + list[i].key + '" onclick="addText(event)">' + list[i].book + '</li>';
        lis4 += genLinks(list[i].key, list[i].book)
      };
        document.getElementById('bookList').innerHTML = lis;
        document.getElementById('bookList2').innerHTML = lis2;
        document.getElementById('bookList3').innerHTML = lis3;
        document.getElementById('bookList4').innerHTML = lis4;
    };

function genLinks(key, bkName) {
var links = '';
links += '<a href="javascript:del(\'' + key + '\',\'' + bkName + '\')"><img src="images/bin.png" style="width: 24px; height: 24px; transform: translateY(-7px); opacity: .4;"></img></a> ';
return links;
};

function del(key, bkName) {
var response = confirm("Are certain about removing \"" + bkName + "\" from the list?");
    if (response == true) {
        // build the FB endpoint to the item in movies collection
        var deleteBookRef = buildEndPoint(key);
        deleteBookRef.remove();
        }
    }

function buildEndPoint (key) {
return new Firebase('https://project04-167712.firebaseio.com/books/' + key);
}
// this will get fired on inital load as well as when ever there is a change in the data
bookList.on("value", function(snapshot) {
var data = snapshot.val();
var list = [];
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            book = data[key].book ? data[key].book : '';
        if (book.trim().length > 0) {
            list.push({
            book: book,
            key: key
            })
        }
    }
}
// refresh the UI
refreshUI(list);
});

If anybody has any help I'd greatly appreciate it!

Try this pseudocode: if your list length is bigger than 9 then fetch just 10 elements, if not use list.length as your threshold(that way you do not have the index out of range exception) — Hackerman
– Hackerman, Commented May 29, 2017 at 21:43

trincot · Accepted Answer · 2017-05-29 21:49:56Z

2

When the list size is shorter than 10, you will get an error in the loop because you will eventually address a property (like key) that does not exist on list[i] (since it is undefined). If you would check the console, you would notice that this error is reported.

To fix this, change the condition of the first for loop like this:

for (var i = 0; i < Math.min(10, list.length); i++) {

This way, the loop will never iterate to an entry that does not exist. It will stop after 9 or after list.length-1 whichever comes first.

Alternatively, you can just put the two conditions with an && operator:

for (var i = 0; i < 10 && i < list.length; i++) {

edited May 29, 2017 at 21:49

answered May 29, 2017 at 21:43

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JS for loop not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related