CODEWITHSUNDEEP
javascriptjqueryajax
nacho sepulveda
nacho sepulveda

Reputation: 31

sum values from multiple ajax requests

im trying to get the total value of the data returned by the ajax requests, but it is showing total:0 because it is executing the totalRev before completing the ajax requests.

var totalRev = 0;
        $.ajax({
            type: "POST",
            url: "cloudmobi.php",
            data: {action: 'cloudmobi'},
            dataType:'JSON', 
            success: function(response){
                document.getElementById('cloudmobi').innerHTML = response.cloudmobi;
                console.log(response.cloudmobi);
                var cloudmobi = parseInt(response.cloudmobi);
                console.log('CLOUDMOBI:'+cloudmobi);
                totalRev += cloudmobi;

            }
        });
        $.ajax({
            type: "POST",
            url: "mobusi.php",
            data: {action: 'mobusi'},
            dataType:'JSON', 
            success: function(response){
                document.getElementById('mobusi').innerHTML = response.mobusi;
                console.log(response.mobusi);
                var mobusi = parseInt(response.mobusi);
                totalRev += mobusi;
                console.log('MOBUSI:'+mobusi);

            }
        });
        $.ajax({
            type: "POST",
            url: "appnext.php",
            data: {action: 'appnext'},
            dataType:'JSON', 
            success: function(response){
                document.getElementById('appnext').innerHTML = response.appnext;
                console.log(response.appnext);
                var appnext = parseInt(response.appnext);
                totalRev += appnext;
                console.log('APPNEXT:'+appnext);

            }
        });
        console.log('TOTAL:'+totalRev);

I do not want to use async because the whole purpose of using ajax here is to load the site fast then dynamically load the data

Upvotes: 1

Views: 682

Answers (2)

iNovelletto
iNovelletto

Reputation: 237

jQuery "when" solves your problem:

$.when( d1, d2 ).done(function ( v1, v2 ) {
    console.log( v1 ); // "Fish"
    console.log( v2 ); // "Pizza"
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

It would be far better to send all the data in a single request so you can do the sum on the server and send it in a single property in the response.

Assuming, for whatever reason, you cannot do that, then you could instead store all the promises from the AJAX requests and then execute your code after all of them have completed and added their values to an array. Then you can sum the array. Something like this:

var values = [];
var promises = [
  $.ajax({
    // ajax settings...
    success: function() {
      values.push(parseInt(response.cloudmobi), 10);
    }
  }),
  $.ajax({
    // ajax settings...
    success: function() {
      values.push(parseInt(response.mobusi), 10);
    }
  }),
  // Nrequests...
];

$.when.apply(this, promises).done(function() {
  var sum = values.reduce(function(a, b) {
    return a + b;
  }, 0);
  // work with sum here...
});

Upvotes: 0

Related Questions