Ajax Call in For Loop, For Loop Completing Before all Calls are Made

Question

I have created a for loop that loops the number of times that an element appears in a container. The for loop grabs some data from the HTML and creates a JSON url which will then return a value. That value should then be added to the HTML in the appropriate place.

The problem seems that the for loop completes before all of the Ajax calls are made, so only the last value is being added to the HTML. I thought that I could make sure that the readystate is equal to 4, but that solution did not work. I also tried using complete, rather than success as an Ajax Event. Any insights? Here is my the code.

for(var index = 0; index < $('#wizSteps #step6 label').length; index++){
    var priceCount;
    console.log(index);
    var currentSelect = $('#wizSteps #step6 label[data-pricepos="'+index+'"]');
    url = 'http://www.thesite.com/api/search.json?taxonomy=cat3435' + currentSelect.find('input').attr('name');
    jQuery.ajax({
        url: url,
        dataType: "JSON",
        success: function( data ){
            var totalResult = data.totalNumberOfResults;
            console.log(currentSelect);
            currentSelect.find('.itemCount').text(totalResult);

        }     
    });
}

Ajax is asynchronous. You are starting them in order, but they will complete at a later time, possibly in a different order. — user400654
– user400654, Commented Jan 20, 2014 at 18:10
Regarding currentSelect: Javascript closure inside loops - simple practical example — Jonathan Lonowski
– Jonathan Lonowski, Commented Jan 20, 2014 at 18:11
have you tried adding async: false, to your AJAX options right before url: url,? — MonkeyZeus
– MonkeyZeus, Commented Jan 20, 2014 at 18:20
@MonkeyZeus I don't know if he has, but I know he shouldn't. — Jason P
– Jason P, Commented Jan 20, 2014 at 18:20
async: false will surely solve the problem, but it will lock the browser up during the request, making your page look broken. Do not use async: false in this case. — user400654
– user400654, Commented Jan 20, 2014 at 18:21

Jason P · Accepted Answer · 2014-01-20 18:18:15Z

2

It looks like you don't necessarily need the requests to finish in order, you just need to keep track of currentSelect in a way that works. For that, you can use the context ajax option:

for (var index = 0; index < $('#wizSteps #step6 label').length; index++) {
    var currentSelect = $('#wizSteps #step6 label[data-pricepos="' + index + '"]');
    url = 'http://www.thesite.com/api/search.json?taxonomy=cat3435' + currentSelect.find('input').attr('name');
    jQuery.ajax({
        url: url,
        dataType: "JSON",
        context: currentSelect,
        success: function (data) {
            var totalResult = data.totalNumberOfResults;
            this.find('.itemCount').text(totalResult);

        }
    });
}

answered Jan 20, 2014 at 18:18

Jason P

27k3 gold badges34 silver badges45 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:21:55Z

2

That is ok, the calls are not supposed to be done this way. They are only initiated in the loop.

Ajax is asynchronous. The queries are completed later, may be in different order.

If you want to be sure that every call is completed before you do the next one, you must integrate the next call into the callback function of the previous.

In your case the variable may be overwritten in the call back function. You can learn more on this here:

Asynchronous Javascript Variable Overwrite

Another interesting question/discussion related to the topic:

What are the differences between Deferred, Promise and Future in JavaScript?

It does not directly answer your question, but helps to understand the problem deeper. The point is that you probable don't need the loop at all (or you do but in a completely different form).

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jan 20, 2014 at 18:08

Igor Chubin

65.1k14 gold badges132 silver badges149 bronze badges

5 Comments

John Fisher Over a year ago

How is that ok? The results are incorrect, according to the beginning of the second paragraph in the question.

user400654 Over a year ago

It's ok because that's the expected behavior of the given code. Whether or not that's the intended behavior is another story.

John Fisher Over a year ago

@KevinB: Um.... Isn't that the point of StackOverflow? To get code that doesn't do what is intended to perform the work that is intended?

user400654 Over a year ago

Sure, but this answer does explain why it is happening, code isn't always required. The updated answer does at least give a suggestion of how to fix it.

John Fisher Over a year ago

Yeah, that's better. :)

taxicala · Accepted Answer · 2014-01-20 18:09:46Z

0

You should try creating a recursive function, that you will call again in the success of the ajax call, this way you will be sure that the next ajax call will be called only once the previous call is done.

answered Jan 20, 2014 at 18:09

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Comments

friedi · Accepted Answer · 2014-01-20 18:24:37Z

If you want the requests in a sequence, you can work with a queue.

First build the queue:

var queue = [],
    index,
    stepLength = $('#wizSteps #step6 label').length;

for(index = 0; index < length; index++){
    var priceCount;
    console.log(index);
    var currentSelect = $('#wizSteps #step6 label[data-pricepos="'+index+'"]');
    url = 'http://www.thesite.com/api/search.json?taxonomy=cat3435' + currentSelect.find('input').attr('name');
    queue.push([url, currentSelect]);
}

And after that do the serial ajax requests:

function serialAjax() {
    if(queue.length === 0) {
        return;
    }
    var queueData = queue.shift(),
        url = queueData[0],
        currentSelect = queueData[1];

    jQuery.ajax({
        url: url,
        dataType: "JSON",
        success: function( data ){
            var totalResult = data.totalNumberOfResults;
            console.log(currentSelect);
            currentSelect.find('.itemCount').text(totalResult);
            serialAjax();
        }     
    });
};
// call the function
serialAjax();

Collectives™ on Stack Overflow

Ajax Call in For Loop, For Loop Completing Before all Calls are Made

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related