passing index from for loop to ajax callback function (JavaScript)

Question

I have a for loop enclosing an ajax call and I'm trying to determine the best method for passing the index from the for loop to the callback function. Here is my code:

var arr = [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010];

for (var i = 0; i < arr.length; i++)
{
  $.ajaxSetup({ cache:false })
  $.getJSON("NatGeo.jsp", { ZipCode: arr[i], Radius:   
            document.getElementById("radius").value, sensor: false },      
            function(data)
            { 
              DrawZip(data, arr[i]);
        }
  );
}

Currently, only the last value of the arr array is passed due to the asynchronous ajax call. How can I pass each iteration of the arr array to the callback function, aside from running the ajax call synchronously?

although this is a duplicate of about 30 other questions, it is a very common issue when using functions within loops, and I hope you won't mind me modifying one of the tags to push that count up to 31 :) — Anurag
– Anurag, Commented May 20, 2011 at 20:50

scurker · Accepted Answer · 2011-05-20 21:55:07Z

70

You could use a javascript closure:

for (var i = 0; i < arr.length; i++) {
  (function(i) {
    // do your stuff here
  })(i);
}

Or you could just use $.each:

var arr = [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010];

$.each(arr, function(index, value) {
  $.ajaxSetup({ cache:false });
  $.getJSON("NatGeo.jsp", { ZipCode: value, Radius:   
    document.getElementById("radius").value, sensor: false },      
    function(data) { 
      DrawZip(data, value);
    }
  );
});

edited May 20, 2011 at 21:55

answered May 20, 2011 at 20:46

scurker

4,8031 gold badge28 silver badges25 bronze badges

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

1 Comment

eradman Over a year ago

It's worth nothing that these two solutions are the same, and there is nothing magical about $.each. In both cases an anonymous function was used to create a closure.

yitwail · Accepted Answer · 2011-05-20 21:53:25Z

5

I didn't read all 30 questions @Anurag listed, but I found the following callback syntax that seems to work:

(function(year) {
  return (function(data) {DrawZip(data, year);});
})(arr[i])

This replaces the original function(data). Incidentally, the results are in random order, due to the asynchronous response

answered May 20, 2011 at 21:53

yitwail

2,0093 gold badges21 silver badges27 bronze badges

Comments

Herbi Shtini · Accepted Answer · 2016-05-05 12:19:53Z

3

You can even omit for-loop brackets as mentioned by John Resig here i think this way is more readable

for (var i = 0; i < arr.length; i++) (function(i) {

    // async processing
    setTimeout(function(){ 
      console.log(i);
    }, i * 200); 

})(i);

answered May 5, 2016 at 12:19

Herbi Shtini

2,06029 silver badges34 bronze badges

Collectives™ on Stack Overflow

passing index from for loop to ajax callback function (JavaScript)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related