CODEWITHSUNDEEP
javascriptjqueryajaxget
Mll
Mll

Reputation: 63

Create and Execute Multiple Ajax Requests via promise

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 ?

Upvotes: 1

Views: 659

Answers (3)

irfan
irfan

Reputation: 618

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

Upvotes: 2

vuza
vuza

Reputation: 2634

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

Upvotes: 0

Want to be deleted
Want to be deleted

Reputation: 136

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

Upvotes: 0

Related Questions