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!

Possible duplicate of Calling an asynchronous function within a for loop in JavaScript — Liam
– Liam, Commented Oct 1, 2019 at 14:21

SLaks · Accepted Answer · 2017-04-13 14:47:39Z

48

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

edited Apr 13, 2017 at 14:47

answered Apr 22, 2010 at 1:47

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

3 Comments

awgy Over a year ago

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 Over a year ago

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

Sridhar Sarnobat Over a year ago

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

Huseyin Zeki · Accepted Answer · 2011-07-19 14:32:14Z

-6

Turn async off, it will fix the problem i guess. I mean add this: async:false

answered Jul 19, 2011 at 14:32

Huseyin Zeki

11 bronze badge

2 Comments

MadushM Over a year ago

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

fldsofglry Over a year ago

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

Collectives™ on Stack Overflow

jQuery ajax inside a loop problem

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related