Function call inside loop taking only last iteration

Question

my code look like this:

if (ACTIVETICKETS.length > 0) 
{
    for (var m in  ACTIVETICKETS) 
    {
        if (ACTIVETICKETS.hasOwnProperty(m)) 
        {
            var marker = new L.Marker(new L.LatLng(ACTIVETICKETS[m].location.x, ACTIVETICKETS[m].location.y));
            createHtmlForPopUp(m, function(data)
            {
                console.log(m);
                marker.bindPopup( data ); // calling a function with callback
                tile_layer.addLayer(marker);                           
            });
        }
    } // for loop ends here
}

While executing this, I am getting only the last iteration of m. Total length of ACTIVETICKETS array is 16. So I am getting only 15 entered 16 time

Ok, that's a classical problem, let's just look for another identical question to close this one. — Denys Séguret, Jul 05 '13 at 14:54
This one is similar but more complex : http://stackoverflow.com/questions/14791158/javascript-settimeout-and-loops — Denys Séguret, Jul 05 '13 at 14:56

score 2 · Accepted Answer · edited May 23 '17 at 12:01

The code below should work, but as I commented above, please read about closure so you know why.

    if (ACTIVETICKETS.length > 0) {
      for (var m in  ACTIVETICKETS) {
        (function(x) {
          if (ACTIVETICKETS.hasOwnProperty(x)) {
            var marker = new L.Marker(new L.LatLng(ACTIVETICKETS[x].location.x, ACTIVETICKETS[x].location.y));
              createHtmlForPopUp(x, function(data){
                console.log(x);
                marker.bindPopup( data ); // calling a function with callback
                tile_layer.addLayer(marker);
              });
          }
        })(m);
      } // for loop ends here
    }

Denys Séguret · Answer 2 · 2013-07-05T15:44:30.507

The problem you have is that the value of m, by the time the callback is called, it the one of end of loop. A solution is to protect this value by setting it as value of a variable in an immediately called function :

for (var m in  ACTIVETICKETS) {
   (function(m){
        if (ACTIVETICKETS.hasOwnProperty(m)) 
        {
            var marker = new L.Marker(new L.LatLng(ACTIVETICKETS[m].location.x, ACTIVETICKETS[m].location.y));
            createHtmlForPopUp(m, function(data)
            {
                console.log(m);
                marker.bindPopup( data ); // calling a function with callback
                tile_layer.addLayer(marker);                           
            });
        }
    })(m);
 } // for loop ends here

This is because JavaScript doesn't have block scope, and only creates a new variable scope when a function is invoked.

You can use the same technique with a named function instead of an inline one as above:

function makeTicket(m){
  if (ACTIVETICKETS.hasOwnProperty(m)) 
  {
        var marker = new L.Marker(new L.LatLng(ACTIVETICKETS[m].location.x, ACTIVETICKETS[m].location.y));
        createHtmlForPopUp(m, function(data)
        {
            console.log(m);
            marker.bindPopup( data ); // calling a function with callback
            tile_layer.addLayer(marker);                           
        });
    }
}

Then do this:

for (var m in  ACTIVETICKETS) {
    makeTicket(m)
} // for loop ends here

And as a side note, there are very compelling reasons to not use a for-in enumeration on Arrays, but rather to use a typical for loop, and you don't need the outside if test, so you could remove it and just do

for (var m =0; m<ACTIVETICKETS.length; m++) {
    makeTicket(m)
}

score 0 · Answer 3 · answered Jul 05 '13 at 15:01

You need to create a closure over all the variables you want to access in the callback function.

    createHtmlForPopUp(m, (function (m, data, marker) {
        return function(data)

        {
            console.log(m);
            marker.bindPopup( data ); // calling a function with callback
            tile_layer.addLayer(marker);                           
        }
    })(m, data, marker));

Function call inside loop taking only last iteration

3 Answers3

Linked