How do I loop through an array of objects and fill the object in the mouseover function?

Question

I'm a first year student I've been scrolling through Stack Overflow and have read a lot about the object problem (reference) but I can't figure out the solution to my problem.

I have made arrays of objects and looping over them to fill a div with all the info like img, name, value, so far no problem here.

The problem is with filling a mouseover function (attached to the image) with the object I'm looping through at the moment, so later when I hover over the image all the info of that particular object is shown on another div.

for (i = 0; i < arrgezelschap.lenght; i++) {
  var x = arrgezelschap[i];
  var element = document.createElement("img");
  element.src = x.artikelFoto + "k.jpg";
  element.addEventListener('mouseover', function() {
    showinfo(x)
  });
  inhoud.append(element);
}

In the function showinfo(object) the output is always the last object of the array.

Why is this and what do I need to do so that it saves or points to the object that it's looping through at the moment in my function?

Answer 1

TL;DR: change var x to let x

I can't really do a better job explaining than Creating closures in loops: A common mistake, but I'll take a shot at rephrasing it.

Compare the output of these two snippets (below). The only difference is var vs let. The example demonstrates creating 5 functions in a loop, but does not call them yet. Each function references variables declared inside the loop, outside the loop and in the for itself. Then, at the end of the loop, we call all the functions to see what we got.

In the first case, the variables outside, i (the loop variable) and inside (declared inside the loop) are all declared with var. They are the same variable on every iteration of the loop. The inside var is hoisted to the top of the scope (outside the loop).

When we call all the functions we created, we will see that they all refer to the one-and-only instance of each variable, and they all have the value that the variables have after completion of the loop.

let functions = [];
var outside = 0;
for (var i = 0; i < 5; ++i) {
  outside = i * 10;
  var inside = i * 100;
  functions.push(() => { console.log(outside, i, inside); })
}
functions.map(f => f()); // call all the functions

Output:

40 5 400
40 5 400
40 5 400
40 5 400
40 5 400

In this second example, the variables are all declared with let. The variable i declared in the for and the variable inside declared inside the body of the loop are different variables on each iteration of the loop. But the outside variable is declared outside the loop, so there's still only one outside variable that is used in every iteration of the loop.

When we call all the functions we made this time, we see that each function is displaying a different variable i and inside and their values are the value they held during that particular iteration of the loop, because the variables only existed for that iteration of the loop and the function was bound to the instance of the variable that was used for that iteration. But the outside variable is the same variable every iteration and holds only one value: the value that it has at the end of the loop.

let functions = [];
let outside = 0;
for (let i = 0; i < 5; ++i) {
  outside = i * 10;
  let inside = i * 100;
  functions.push(() => { console.log(outside, i, inside); })
}
functions.map(f => f()); // call all the functions

Output:

40 0 0
40 1 100
40 2 200
40 3 300
40 4 400

In your case, each function binds to the same (one and only) variable x. If you change your declaration of x from var x to let x then you will get a different variable x for each iteration of the loop, and the event listener function will be bound to a different x each time, which will have the value corresponding to that iteration of the loop.

---

Footnote: Hopefully functions.map(f => f()); is not confusing for you. It just calls all the functions in the array. It is the same as this:

for (var index = 0; index < functions.length; ++index) {
    functions[index]();
}

Answer 2

This is because x is a reference here, not a value and it change while you loop. Have a look at this :

let x = 0;
let fcn = a => console.log(a);

function execAnotherFcn(fcn) {
  fcn(x);
}

execAnotherFcn(fcn);
x++;
execAnotherFcn(fcn);

Answer 3

@PopHips answer explains the theory of what is going wrong. so here is a working example with your code so you can follow it.

for(i =0;i<arrgezelschap.lenght;i++){ 
   var x = arrgezelschap[i];
       var element = document.createElement("img");
       element.src = x.artikelFoto + "k.jpg";
       element.dataset.identifyer = i;
       element.addEventListener('mouseover', function(e) { 
           showinfo(arrgezelschap[e.target.dataset.identifyer]) 
       });
       inhoud.append(element);
}

So because we're using an event listener it will give the first param as an EventArgs object, this contains a property called target that is the HTMLElement effected. we can use the dataset (data-) system to save the identifier to the object's dataset so we can use it in the event handler.

Please note this answer should not be used as it is, there is some really bad practice in this answer, NEVER CREATE A FUNCTION INSIDE A LOOP in production code.

Answer 4

You could use the dataset attribute to store your information.

Here's my implementation:

const root = document.querySelector('#root');

function createImagePlaceholder(color, data) {
  const el = document.createElement('div');
  el.style.width = '50px';
  el.style.height = '50px';
  el.style.margin = '5px';
  el.style.backgroundColor = color;
  el.dataset = data;
  
  root.appendChild(el);
  
  
  el.addEventListener('mouseover', () => {
    document.querySelector('pre').innerText = JSON.stringify(data);
  });
  
  el.addEventListener('mouseleave', () => {
    document.querySelector('pre').innerText = '';
  });
}

createImagePlaceholder('red', { text: 'I am a red block' });
createImagePlaceholder('blue', { text: 'I am a blue block' });

<div id="root"></div>
<pre><pre>

Answer 5

You can fix this by making the scope of element block level. This happens because here the value of x is send as a closure and the var is defined as function level.The event listner function will get executed at a future time(not to the main thread), so at that time the value of x is changed by the loop to the last value. This can be done using the let key word or using a IIFE.

1.

    for (i = 0; i < arrgezelschap.length; i++) {
      let x = arrgezelschap[i];
      let element = document.createElement("img");
      element.src = x.artikelFoto + "k.jpg";
      element.addEventListener('mouseover', function() {
        showinfo(x)
      });
      inhoud.append(element);

}

2.

for (i = 0; i < arrgezelschap.lenght; i++) {
  var x = arrgezelschap[i];
  var element = document.createElement("img");
  element.src = x.artikelFoto + "k.jpg";
   (function(x){element.addEventListener('mouseover', function() {
    showinfo(x)
  });})(x);
  inhoud.append(element);
}