Array in ajax call

Question

I have the following piece of code, to get data from IMDB :

for(var i in titles)
{
 $.ajax({
 url: "http://www.imdbapi.com/?t=" + titles[i],
 dataType: 'jsonp',
 success: function(data) {
 $('body').append('"'+titles[i]+'",');
 $.each(data, function(key, val) {
 $('body').append('"'+val+'",');
 });
 $('body').append('<br>');
 window.setTimeout(null, 1000);
 }
 });
}

The code works ok, except for $('body').append('"'+titles[i]+'",'); which alway returns the same title.

• Manu: titles[i] always returns the same title
• Lightness Races in Orbit: Repeating yourself is clearly not helpful.

Answer 1

The loop executes completely before any of the success handlers are called, so when you get into a success handler "i" will be the last title.

You need something like

function makeSuccessHandler(titles, i) {
 return function (data) {
 $('body').append('"'+titles[i]+'",');
 $.each(data, function(key, val) {
 $('body').append('"'+val+'",');
 });
 $('body').append('<br>');
 window.setTimeout(null, 1000);
 }
}
for(var i = 0; i < titles.length; i++)
{
 $.ajax({
 url: "http://www.imdbapi.com/?t=" + titles[i],
 dataType: 'jsonp',
 success: makeSuccessHandler(titles, i)
 });
}

Answer 2

You can not do it like that, the ajax call will execute asynchronous. When your success method is executed the value of your index variable will not be correct. You can fix it if you increment i from your sucess method, and ofcoruse not do a for loop

Answer 3

The success function is asynchronous (it needs to wait for imdb to respond), so it will always run after the entire loop has finished - so i, within that function, will always be the last i.

Easiest way to work around this is to utilise jQuery's each function:

$.each(titles, function (i, value) {
 $.ajax({
 success: function (data) {
 // as usual...
 }
 });
});

This works because a function preserves its own scope (and hence its own copy of i).

• Andrew Shepherd: +1 - I think this is more elegant than having a handler function outside of the block.

Answer 4

The problem is that if you call an asynchronous function in a loop, it will use the last assigned value of enclosing variables.

This can be solved using currying

function appendTitle(var title)
{
 return function(var data) {
 $('body').append('"'+title+'",');
 $.each(data, function(key, val) {
 $('body').append('"'+val+'",');
 });
 $('body').append('<br>');
 window.setTimeout(null, 1000);
 }
}
for(var i in titles)
{
 $.ajax({
 url: "http://www.imdbapi.com/?t=" + titles[i],
 dataType: 'jsonp',
 success: appendTitle(titles[i])
 });
}