passing index from for loop to ajax callback function (JavaScript)
Solution 1
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);
}
);
});
Solution 2
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
Solution 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);
user717236
Updated on June 18, 2020Comments
-
user717236 almost 4 years
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?