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
– Denys Séguret, Commented Jul 5, 2013 at 14:54
This one is similar but more complex : stackoverflow.com/questions/14791158/… — Denys Séguret
– Denys Séguret, Commented Jul 5, 2013 at 14:56

Community · Accepted Answer · 2017-05-23 12:01:43Z

2

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
    }

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Jul 5, 2013 at 15:00

Tyler Biscoe

2,4423 gold badges23 silver badges34 bronze badges

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

Comments

3 revs, 2 users 54% · Accepted Answer · 2013-07-05 15:44:30Z

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)
}

Barmar · Accepted Answer · 2013-07-05 15:01:02Z

0

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));

answered Jul 5, 2013 at 15:01

Barmar

789k57 gold badges554 silver badges669 bronze badges

Collectives™ on Stack Overflow

Function call inside loop taking only last iteration

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related