0
socket.on("upvote", function(data)
{
document.getElementById("main").innerHTML = "";
foodCount = data.slice(0);
for (var i = 0; i < foodCount.length; i++)
    {
        var div = document.createElement("div");
        div.style.width = "300px";
        div.style.height = "300px";
        div.style.backgroundColor = "red";
        div.style.margin = "10px";
        div.innerHTML = foodCount[i].name + " " + foodCount[i].location + " " + foodCount[i].deal + " " + foodCount[i].votes;
        console.log(foodCount[i]);
        div.addEventListener("click", function()
        {
            socket.emit("upvote", foodCount[i]);
        });
        document.getElementById("main").appendChild(div);   
    }

});

So basically, I have this bit of code on the front end js file that creates a div and adds an event listener of a click and uses socket.io to emit an upvote event with foodCount[i]. foodCount is an array I have of objects and the div events listeners are actually running through a for loop for each object in the foodCount array. The problem is, when I try to access a property of the foodCount[i] object on the backend socket server using say foodCount[i].name, it is coming up as null. I don't know if it's because I can't add event listeners like this or what, but the data is getting lost somehow, any insight?

   socket.on("upvote", function(data)
{
    console.log(data);
    for (var i = 0; i < foodCount.length; i++)
        {
            if (foodCount[i].name == data.name)
                {
                    foodCount[i].votes++;
                }
        }

    io.sockets.emit("upvote", foodCount);
});

This is the bit of code on the backend socket server. As you can see, the data parameter is the specific object I passed from the front end server (foodCount[i]) and I am getting null when I try to do data.name in the for loop.

indora_no_ya
  • 55
  • 1
  • 1
  • 5
  • What is `i` in the front-end code? If that code is inside a standard `for` loop then I'll bet at the time of the click event `i` is equal to `foodCount.length` and `foodCount[i]` is `undefined`. Does `console.log(foodCount[i])` show the right value? Please [edit] your question to show the surrounding loop code. (Also maybe `console.log(data)` in the backend code to confirm what it's receiving.) – nnnnnn Sep 15 '17 at 01:58
  • i is just the looping variable, foodCount is an array of objects so I'm just looping through it. – indora_no_ya Sep 15 '17 at 02:03
  • OK, now that you've added the loop code I can confirm that you do have [this problem](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) as per my previous guess, so I've closed this question as a duplicate. You may find [this other question](https://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue?noredirect=1&lq=1) has an example much closer to your own code. The simplest fix is to replace your `for` loop with `.forEach()`. – nnnnnn Sep 15 '17 at 02:05
  • Duplicate of a thousand SO questions. Have you tried Googling "js event handler for loop"? The first 10 hits are SO... – marekful Sep 15 '17 at 02:07
  • wait so, can you kind of expand on what you mean by it being undefined. If I have say 3 objects in my foodcount front end array and im looping through it, it'll just add event listeners to each of them right? And when I click whichever of them, it will emit the upvote event and pass the foodCount[i] object, whichever one it is correct? – indora_no_ya Sep 15 '17 at 02:11
  • @nnnnnn sorry, can you answer my question above, I'm still confused – indora_no_ya Sep 15 '17 at 02:20
  • nevermind, just used for each instead and it instantly fixed it. I think I understand the scope issue now, thanks guys. – indora_no_ya Sep 15 '17 at 02:29

0 Answers0