Jquery/Javascript - Variables scope and behaviour in jquery ajax requests

Question

I'm with an weird behaviour that I cannot understand. Here is the code:

$.ajax({
    url: ...,
    dataType: ...,
       data: ...,
    success: function( data ) {
            ...

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

                label_to_change = "some-" + i + "-item"

                        $.ajax({
                            url: ...,
                            dataType: ...,
                               data: ...,
                            success: function( data ) {

                                // Why I can't access the value in each loop, this will give me allways the last loop value
                                console.log(label_to_change)
                            }
                        }); 
            } 
    }
}); 

I need to access the var label_to_change in the second ajax request but instead of getting this:

some-0-item
some-1-item
some-2-item

I got this:

some-2-item
some-2-item
some-2-item

Any clues on what I'm doing wrong?

Best Regards,

Answer 1

The problem is because the label_to_change variable is a single instance, and the for loop is changing it 3 times before any of your ajax calls can complete. You could use an anonymous function (or whatever the correct term here is) and do something like this:

label_to_change = "some-" + i + "-item";

(function(newLabel){
    $.ajax({
       url: ...,
       dataType: ...,
       data: ...,
       success: function( data ) {
          console.log(newLabel)
       }
    }); 
})(label_to_change);

Answer 2

UPDATE you should do this : (in the top of code)

var change_index=0;

in second ajax call :

complete : function(){
   change_index++;
}

here is :

   var change_index=0;
  var i=0;
    $.ajax({
        url: ...,
        dataType: ...,
           data: ...,
        success: function( data ) {
                ...

               while( i<data.length) {

                    label_to_change = "some-" + change_index + "-item"

                            $.ajax({
                                url: ...,
                                dataType: ...,
                                   data: ...,
                                success: function( data ) {


                                    console.log(label_to_change)
                                }
                complete:function(){
                                    change_index ++;
                 i++;
                }
                            }); 
                } 
        }
    });

because the ajax finishing time is related to the server page execution and for statement will execute much faster than server statements . so it will set the label_to_change to 2 and maybe the ajax call has not finished yet. so you should increase the label_to_change in complete event function of ajax not in forloop body.

Answer 3

This is because the ajax call is reaching success after the for loop has completed. Therefore, the value it is using is only the most recent.

Declaring the label_to_change variable within the success function should work. Try this:

for (var i=0; i<data.length; i++) {
    //EDIT: added
    var iCurrent = i;

    $.ajax({
        url: ...,
        dataType: ...,
        data: ...,
        success: function( data ) {
            //placing the declaration inside this function will make the i value
            // be specific to this ajax call

            label_to_change = "some-" + iCurrent + "-item";

            console.log(label_to_change)
        }
    }); 
 }