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.

titles[i] always returns the same title

Manu
– Manu

2011-06-08 10:20:34 +00:00
Commented Jun 8, 2011 at 10:20 — Manu
– Manu, Commented Jun 8, 2011 at 10:20
Repeating yourself is clearly not helpful.

Lightness Races in Orbit
– Lightness Races in Orbit

2011-06-08 10:24:31 +00:00
Commented Jun 8, 2011 at 10:24 — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Jun 8, 2011 at 10:24

Bemmu · Accepted Answer · 2011-06-08 10:21:02Z

2

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

answered Jun 8, 2011 at 10:21

Bemmu

18.3k16 gold badges82 silver badges94 bronze badges

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

Comments

Anders · Accepted Answer · 2011-06-08 10:22:15Z

1

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

answered Jun 8, 2011 at 10:22

Anders

17.6k10 gold badges86 silver badges149 bronze badges

Comments

David Tang · Accepted Answer · 2011-06-08 10:25:45Z

1

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

edited Jun 8, 2011 at 10:25

answered Jun 8, 2011 at 10:18

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

1 Comment

Andrew Shepherd Over a year ago

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

Andrew Shepherd · Accepted Answer · 2011-06-08 10:36:33Z

0

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

edited Jun 8, 2011 at 10:36

answered Jun 8, 2011 at 10:26

Andrew Shepherd

45.5k33 gold badges148 silver badges212 bronze badges

Collectives™ on Stack Overflow

Array in ajax call

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related