Create and Execute Multiple Ajax Requests via promise

Question

I am trying to use $.when to execute my Ajax Request and to do manipulate data after their execution. Here is my code until now:

function method2 (data2) {
    return $.ajax({
        type: 'GET',
        url: 'Some URL',
        dataType: 'jsonp',
        success: function(data2){
            console.log(data2);
        }

    });
}

function method3 (){
    return $.ajax({
        type: 'GET',
        url: 'Some URL',
        dataType: 'jsonp',
        success: function(data3){
            console.log(data3);
        }
    });
}


function method4(){
    return $.ajax({
        type: 'GET',
        url: 'Some URL',
        dataType: 'jsonp',
        success: function(data4){
            console.log(data4);
        }
    });
}


function method5(){
    return $.ajax({
        type: 'GET',
        url: 'Some URL',
        dataType: 'jsonp',
        success: function(data5){
            console.log(data5);
        }
    });
}

function method6(){
    return $.ajax({
        type: 'GET',
        url: 'Some URL',
        dataType: 'jsonp',
        success: function(data6){
            console.log(data6); 
        }
    });
}



// Execute all needed data from all of the requests.
function showData(){

}

$.when( method1(), method2(), method3(), method4(), method5(), method6() ).then( showData() );

So I would like to show the data from these Ajax get requests on my HTML page and I would like to execute all of the code inside function showData() but the problem is that I do not have access to my methods when I try to console.log() them inside showData() and I would like to know how I can access them ? Any solution or ideas ?

Read the documentation and check the examples: $.when()

Andreas
– Andreas

2016-02-27 13:22:59 +00:00
Commented Feb 27, 2016 at 13:22 — Andreas
– Andreas, Commented Feb 27, 2016 at 13:22

irfan · Accepted Answer · 2022-11-21 09:06:23Z

2

From the documentation with little modification:

function method1() {
  return $.ajax({
    type: 'GET',
    url: 'Some URL',
    dataType: 'jsonp'
  });
}

function method2() {
 return $.ajax({
    type: 'GET',
    url: 'Some URL',
    dataType: 'jsonp'
  });
}

// Execute all needed data from all of the requests.
function showData(v1, v2) {
  console.log(v1);
  console.log(v2);
}

$.when(method1, method2).done(showData);

edited Nov 21, 2022 at 9:06

answered Feb 27, 2016 at 14:05

irfan

6184 silver badges6 bronze badges

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

3 Comments

Mll Over a year ago

I have checked the documentation and your explanation but when i try to console.log(v2); for example inside function showData(v2){...} i receive Uncaught ReferenceError: v2 is not defined and I cannot output the data that I want to

Andreas Over a year ago

@divkiller You don't need to use $.Deferred (and handle the resolve yourself) here. Just do return $.ajax(...) as $.ajax() already returns a Promise: fiddle

Mll Over a year ago

@Andreas I am going to try both ways, but yea thank you for the help and fast suggestions :) really appreciate your time !

Want to be deleted · Accepted Answer · 2016-02-27 13:25:58Z

0

function showData(){
var array = ['url1', 'url2', 'url3', 'url4', 'url5', 'url6'];
for (var i = 0; i < array.length; i++) {
      $.ajax({
        type: 'GET',
        url: array[i],
        dataType: 'jsonp',
        success: function(data){
        console.log(data)
    }
});
}
}
showData();

answered Feb 27, 2016 at 13:25

Want to be deleted

1367 bronze badges

1 Comment

Andreas Over a year ago

That's not what divkiller has asked for. Just read the documentation of $.when() and it should be obvious.

vuza · Accepted Answer · 2016-02-27 13:29:57Z

0

Try series from caolan/async library: https://github.com/caolan/async#seriestasks-callback

function method2 (callback) {
    return $.ajax({
        type: 'GET',
        url: 'Some URL',
        dataType: 'jsonp',
        success: function(data2){
            callback(null, data2); // Call callback, first parameter if there was an error, second the result
        }
    });
}

function method3 (callback){
    return $.ajax({
        type: 'GET',
        url: 'Some URL',
        dataType: 'jsonp',
        success: function(data3){
            callback(null, data3);
        }
    });
}

function method4(callback){
    return $.ajax({
        type: 'GET',
        url: 'Some URL',
        dataType: 'jsonp',
        success: function(data4){
            callback(null, data4);
        }
    });
}

/* ... */

async.series([
    method2,
    method3,
    method4,
    /* ... */
], function(err, results){
    console.log(results); // Find all the stuff you passed to the callbacks, e.g. results = [data2, data3, data4];
});

answered Feb 27, 2016 at 13:29

vuza

2,6342 gold badges14 silver badges12 bronze badges

1 Comment

Andreas Over a year ago

There is no separate library required (besides jQuery) to achieve exactly the same result

Collectives™ on Stack Overflow

Create and Execute Multiple Ajax Requests via promise

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related