遍历ajax调用

I am trying to loop through AJAX calls but to my surprise my loop is not working.

for (var i = 0; i < lengthTotal; i++) {             
    $.ajax({
        dataType: "json",
        url: "{{action('ReportingController@getDailystats')}}/" + getCampaign[i] + "/" + getStartDates[i] + "/" + getEndDates[i]
    }).done(function(resultThree) {
        console.debug(i) //is always 2
        $(resultThree).each(function(index2, value2){ 
            barTable = [ getCampaignName, value2.impressions, value2.clicks ];
            xBYxTable($('tbody#stats'), barTable);
            //valueInside++;                                                                                
        }); // End resultthree
    });  //End Done 
}

This is not the best practice to create functions inside of loop.

Try this:

for (var i = 0; i < lengthTotal; i++) {
    (function (i) {
        $.ajax({
            dataType: "json",
            url: "{{action('ReportingController@getDailystats')}}/" + getCampaign[i] + "/" + getStartDates[i] + "/" + getEndDates[i]
        }).done(function (resultThree) {
            console.debug(i) //is always 2
            $(resultThree).each(function (index2, value2) {

                barTable = [getCampaignName, value2.impressions, value2.clicks];

                xBYxTable($('tbody#stats'), barTable);
                //valueInside++;                                                                                
            }); // End resultthree

        }); //End Done 
    })(i);
}

The reason this work is closures. The variables from outside functions are accessible to the inner functions even after the function is exited. Here, i inside for loop is changed until the response of ajax comes. By using closure, i is copied into the local variable of the function.

I guess the follwing line is putting you in trouble:

barTable = [getCampaignName,value2.impressions,value2.clicks];

You are overwritting this array in each iteration of the loop. So you will get the values in the last iteration only. Try pushing to this array if appending was intended.

Please try below, and confirm the ajax call is working without loop.

    for (var i=0 ;i<lengthTotal;i++){ 
        performOperation(i);          
    }

    function performOperation(i)
    {
        $.ajax({
            dataType: "json",
            url: "{{action('ReportingController@getDailystats')}}/"+getCampaign[i]+"/"+getStartDates[i]+"/"+getEndDates[i]
        }).done(function(resultThree){
                console.debug(i) //is always 2
                $(resultThree).each(function(index2,value2){     
                       barTable = [getCampaignName,value2.impressions,value2.clicks];    
                       xBYxTable($('tbody#stats'),barTable);
                       //valueInside++;                                                                                
                 });// End resultthree

        });
    }

It may helps you.

Your problem here is async, you need to execute ajax call from a function:

for (var i = 0; i < lengthTotal; i++) {
    (function (i) { // this is a self-executing anonnymus function
       // lace ajax here
    })(i);
}

Your problem is simple. You are creating a loop with variable i. But inside th loop you are calling ajax call -async.

Not let's say, your loop iterated in 0,001ms. And AJAX call takes 0.5 ms. When AJAX will return a response, your loop will have ended, but i variable will be already incremented, and it's value will be 2.

To avoid this, you need to wrap your javascript call inside a function and pass i as a parameter. That way i will be copied, and incrementing it outside the function will not affect it.