Why is iterator i always equal to 4 and how do I fix this issue?

Question

I am trying to load comments and their replies from my database.

To do this, I need to know which replies need to be added after which comments.

I tried doing this with an iterator, assigning i to each new comment as an id and trying to then add all corresponding replies to the pertinent "#"+i Sadly this does not work as you can see in the output of the console.logs:

ITERATOR: 1
ITERATOR: 2
ITERATOR: 3
ITERATOR: 4

ANSWER ITERATOR: 4
ANSWER ITERATOR: 4
ANSWER ITERATOR: 4
ANSWER ITERATOR: 4

All replies are added under comment with id of 4.

Which is not what was expected obviously.

What is causing this and how do I fix it ?

(I add the replies using insertAfter($("#"+i));)

var i = 0;
    var postKey = "<%= post.key %>";
    var commentsRef = firebase.database().ref("comments/"+postKey).orderByChild('commenttimestamp').limitToFirst(25);
    commentsRef.once("value", function(snapshot) {
        snapshot.forEach(function(childSnapshot){
            i++;
            console.log("ITERATOR: "+i);

                $("#commentsBox").prepend("<div class='fullComment' id='"+i+"'><a href='../../users/"+childSnapshot.val().author+"'><div class='userCommentBox'><div class='commentUsername'>"+childSnapshot.val().username+"</div><img class='userPic' src='https://storage.googleapis.com/gaminghub-upload/"+childSnapshot.val().profilepic+"' /></div></a><div class='comment'>"+childSnapshot.val().text+"</div><div><img data-post='"+postKey+"' data-comment='"+childSnapshot.key+"' data-author='"+ childSnapshot.val().author +"' class='commentCross' src='./../../public/assets/cross.png'><img class='replyIcon' data-comment='"+childSnapshot.key+"' data-author='"+ childSnapshot.val().author +"'  src='./../../public/assets/replyIcon.png'></div></div>");
                var that = $(this);
                var answersRef = firebase.database().ref("comments/"+postKey+"/"+childSnapshot.key+"/answers");
                answersRef.orderByChild("answertimestamp").once("value", function(answersSnapshot) {
                    answersSnapshot.forEach(function(answer) {
                        if (answer.val().profilepic == undefined || answer.val().profilepic == null || answer.val().profilepic == "") {
                            $("<div class='answer'><a href='../../users/"+answer.val().author+"'><div class='userCommentBox'><div class='commentUsername'>"+answer.val().username+"</div><img class='userPic' src='../../../public/assets/miniProfilePic.png' /></div></a><div class='comment'>"+answer.val().text+"</div><div><img class='answerCross' data-post='"+postKey+"' data-comment='"+childSnapshot.key+"' data-answer='"+answer.key+"' data-author='"+ childSnapshot.val().author +"' src='./../../public/assets/cross.png'></div></div>").insertAfter($("#"+i));
                        } else {
                            console.log("ANSWER ITERATOR: "+i);
                            $("<div class='answer'><div class='userCommentBox'><a href='../../users/"+answer.val().author+"'><div class='commentUsername'>"+answer.val().username+"</div><img class='userPic' src='https://storage.googleapis.com/gaminghub-upload/"+answer.val().profilepic+"' /></div></a><div class='comment'>"+answer.val().text+"</div><div><img class='answerCross' data-post='"+postKey+"' data-comment='"+childSnapshot.key+"' data-answer='"+answer.key+"' data-author='"+ childSnapshot.val().author +"'  src='./../../public/assets/cross.png'></div></div>").insertAfter($("#"+i));
                        }
                    });
                });
            }

`i` is `var`, `forEach` is sync, inside it you execute async functions. By the time any async function gets executed `i === 4` because sync loop has finished. — Egor Stambakio, Jun 12 '17 at 20:18
Wostex is right. Try passing i into your forEach like .forEach(function(answer,i) {} — EamonnM, Jun 12 '17 at 20:21
I see you have another outer forEach, so try forEach(function(childSnapshot, i){} - you need to be passing the outer i value down through the nested functions. Hard to say exactly without a working example. — EamonnM, Jun 12 '17 at 20:50
I guess you need some kind of closure here. In `forEach` you don't need to use a global variable. The second argument in `forEach` is current index: `array.forEach((element, index) => {...})` and this index is block-scoped. The second `forEach` - same story. Despite time difference outer loop will always pass correct index inside first array to the inner loop. — Egor Stambakio, Jun 12 '17 at 21:13
@wostex Yes, but what I want is to get the id of current comment in my forEach loop, not get a different id for each reply of a comment, do you see what I mean ? — TheProgrammer, Jun 12 '17 at 21:34
maybe below var that = do a let j=i and then append j to answer iterator — Jeremy Kahan, Jun 13 '17 at 03:20

score 0 · Accepted Answer · answered Jun 13 '17 at 10:28

0

This seems to relate to JavaScript closure inside loops – simple practical example as pointed out by @wostex. A resolution was to put below the line

var that = $(this);

the line

let j=i

and then append j to answer iterator with

console.log("ANSWER ITERATOR: "+j);

answered Jun 13 '17 at 10:28

Jeremy Kahan

3,796
1
10
23

I need 15 rep to upvote you, sorry :/ Just now that I would have also upvoted your answer ^^ – TheProgrammer Jun 13 '17 at 10:34

Why is iterator i always equal to 4 and how do I fix this issue?

1 Answers1