jQuery ajax inside a loop problem

Question

This js loop script always get the last value of ui_item inside a jquery ajax funciton. How can a catch the correct value of each iteration?

for (var i = 0; i <= split_files_cb_value_holder.length - 1; i++){
    var split_values = split_files_cb_value_holder[i].split(':');

    ui_item = split_files_cb_value_holder[i];

    $.ajax({
        type: "POST",
        url: "ds/index.php/playlist/check_folder",
        data: "component_type="+$('#component_type').val()+"&value="+split_values[1],
        success: function(msg)
        {
            console.log(ui_item); //ALWAYS GETS THE LAST VALUE
        },
        error: function()
        {
            alert("An error occured while updating. Try again in a while");
        }
    });

}

Thanks!

Solution

The problem is that the anonymous callback method captures the ui_item variable by reference. Since there is only one variable, it always gets whatever was assigned last to the variable.

You need to wrap the contents of the for loop in a function that takes i as a parameter, then call the function in the loop. Each call to the wrapper function will create a separate variable, solving the problem.

For example:

function doCheck(i) {
    var split_values = split_files_cb_value_holder[i].split(':');

    var ui_item = split_files_cb_value_holder[i];

    $.ajax({
        type: "POST",
        url: "ds/index.php/playlist/check_folder",
        data: "component_type="+$('#component_type').val()+"&value="+split_values[1],
        success: function(msg)
        {
            console.log(ui_item); //Don't always get the last value
        },
        error: function()
        {
            alert("An error occured while updating. Try again in a while");
        }
    });
}

for (var i = 0; i < split_files_cb_value_holder.length; i++) 
    doCheck(i);

Comments

[kamushin]

Add let before ui_item will solve this.

[Liam]

Possible duplicate of Calling an asynchronous function within a for loop in JavaScript

[awgy]

Thank you for the correction, but I feel compelled to add a small note. Sometimes tone isn't conveyed well over the internet, and to get a terse comment beginning with "WRONG" seemed harsh. But, I was glad to see your answer and appreciated the correction. +1 from me.

[SLaks]

@awgy: I'm sorry; I didn't mean to be offensive. However, seeing two identically wrong answers (and one from a >100K user), I wanted to firmly head off the misconception. (And, I'm exhausted)

[MadushM]

Yes that's a 'quick and dirty' fix causing browser to load slow might even interrupt loading, altogether.

[fldsofglry]

As an update: async false is deprecated as of jQuery 1.8. api.jquery.com/jQuery.ajax

[Sridhar Sarnobat]

Can this work with an inline function (i.e. don't give a name to the helper function doCheck()). Colocated code has its advantages.