CODEWITHSUNDEEP
javascriptjqueryajaxarrays
Manu
Manu

Reputation: 4500

Array in ajax call

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.

Upvotes: 2

Views: 248

Answers (4)

Andrew Shepherd
Andrew Shepherd

Reputation: 45222

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

Upvotes: 0

David Tang
David Tang

Reputation: 93664

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

Upvotes: 1

Anders
Anders

Reputation: 17554

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

Upvotes: 1

Bemmu
Bemmu

Reputation: 18217

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

Upvotes: 2

Related Questions