multiple ajax call to single function javascript

Question

I have 3 ajax call. Data from each ajax call is passed to john_doe();

Call 1

$.ajax({
        url: url1,
        dataType: "JSON",
        type: "GET",
      }).success(function(data1){

    john_doe(data1);
});

Call 2

$.ajax({
        url: url2,
        dataType: "JSON",
        type: "GET",
      }).success(function(data2){

    john_doe(data2);
});

Call 3

$.ajax({
        url: url3,
        dataType: "JSON",
        type: "GET",
      }).success(function(data3){

    john_doe(data3);
});

Main function

function john_doe(param){
console.log(param); //Print data from all three ajax call.
}

How to separate data1, data2 and data3 in john_doe function? because I need to carry out arithmetic operation.

Currently,

Input

data1 = one,two,three
data2 = four
data3 = five

Output

console.log(param) would give output as

one
four
five

I want output as

console.log(param[0])
console.log(param[1])
console.log(param[2])

param[0] containing one,two,three
param[1] containing four
param[2] containing five

I dont have control over the data. How to access data1, data2 and data3 separately?

change your john_doe function to take another parameter that identify the fisrt paramater ? — Sorikairo
– Sorikairo, Commented Apr 9, 2017 at 16:57
@Sorikairo right now single console.log(param) prints data coming from data1, data2 and data 3. so I get value1, value2 and value3. Whereas value1 is coming from data1, value 2 from data2 and so on. — Murlidhar Fichadia
– Murlidhar Fichadia, Commented Apr 9, 2017 at 16:58
I don't get your point, yes, that's how it's supposed to work, and ? — Sorikairo
– Sorikairo, Commented Apr 9, 2017 at 16:58
You can add a parameter to john_doe(data, param), such as john_doe(data, "firstParam") and add a if (param == "firstParam") do things — Sorikairo
– Sorikairo, Commented Apr 9, 2017 at 17:02

charlietfl · Accepted Answer · 2017-04-09 17:35:50Z

9

Using promises you can access all the data in Promise.all() callback and do whatever you need with it all at once. Assumes using jQuery 3+. Can use $.when in older versions

  var urls =['data-1.json','data-2.json','data-3.json'];
  // array of ajax promises
  var reqPromises = urls.map(function(url){
    return $.ajax({
       url: url,
       dataType: "JSON",
       type: "GET"
    });
  });

  Promise.all(reqPromises).then(function(res){
     // res is array of all the objects sent to each `$.ajax` from server
     // in same order that urls are in
     var param = res.map(function(item){
       return item.val
     });

     console.log(param)
  })

DEMO

edited Apr 9, 2017 at 17:35

answered Apr 9, 2017 at 17:30

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

artomason Over a year ago

I can't even begin to explain how many questions I have asked in regards to handling this type of behavior; this is great!

user5348307 · Accepted Answer · 2017-04-09 17:07:11Z

Quick and dirty solution is simply pass in an identifier, why is this dirty because it isn't really extensible with respect to adding say 4th or 5th call each time you do this you need to add more identifiers and your if statement in the main method will end up pretty ugly at one point. But that said sometimes "Keeping It Simple" is ok.

Main function:

function john_doe(identifier, param) {

    // best to use something more readable then numbers
    if(identifier == 1) {    
       console.log(param); //Print data from all ajax call 1.
    } else if(identifier == 2) {
       console.log(param); //Print data from all ajax call 2.
    } else if(identifier == 23) {
       console.log(param); //Print data from all ajax call 3.
    } else {
       // handle bad id
    }
}

In your ajax calls, pass in the right identifier, for example Call 2:

    $.ajax({
        url: url2,
        dataType: "JSON",
        type: "GET",
      }).success(function(data2){

    // numeric 2 in in the first param is your identifier
    john_doe(2,data2); });

JohnV · Accepted Answer · 2017-04-09 17:06:33Z

0

Adding a param to let you know where it is being called from

Call 1

$.ajax({
        url: url1,
        dataType: "JSON",
        type: "GET",
      }).success(function(data){

    john_doe('call1',data);
});

Call 2

$.ajax({
        url: url2,
        dataType: "JSON",
        type: "GET",
      }).success(function(data){

    john_doe('call2',data);
});

Call 3

$.ajax({
        url: url3,
        dataType: "JSON",
        type: "GET",
      }).success(function(data){

    john_doe('call3',data);
});

Main function

function john_doe(call,data){
    console.log('Called from : ' + call);
    console.log(data); //Print data from all three ajax call.
}

answered Apr 9, 2017 at 17:06

JohnV

596 bronze badges

Comments

Yogesh Mistry · Accepted Answer · 2017-04-09 17:21:46Z

How about this? Declare an object container to hold your response data values and your arithmetic operation function.

var myParams = {
    all_params: [],
    getParams: function(){
        return this.all_params;
    },
    setParam: function(index, data){
        this.all_params[index] = data;
    },
    yourArithmeticOperation: function(){
        console.log(this.all_params); // your actual logic using all 3 ajax response data
    }
}

Then, in your ajax calls:

// call 1
$.ajax({
    url: url1,
    dataType: "JSON",
    type: "GET",
}).success(function(data){
   myParams.setParam(0, data); // add ajax 1 response data
});

// call 2
$.ajax({
    url: url1,
    dataType: "JSON",
    type: "GET",
}).success(function(data){
   myParams.setParam(1, data); // add ajax 2 response data
});

// call 3
$.ajax({
    url: url1,
    dataType: "JSON",
    type: "GET",
}).success(function(data){
   myParams.setParam(2, data); // add ajax 3 response data
});

In case you need all your response data,

// after all three ajax calls
params = myParams.getParams();
console.log(params);

And finally, your arithmetic operation,

myParams.yourArithmeticOperation();

Haroon Rasheed · Accepted Answer · 2017-04-09 17:31:29Z

-3

try adding async: false to your ajax calls

$.ajax({
        url: url1,
        dataType: "JSON",
        type: "GET",
        async: false,
      }).success(function(data){

    john_doe('call1',data);
});

answered Apr 9, 2017 at 17:31

Haroon Rasheed

54 bronze badges

1 Comment

charlietfl Over a year ago

never ever use async: false. It has always been a terrible practice and is now deprecated by browser vendors and will throw warnings in console

Collectives™ on Stack Overflow

multiple ajax call to single function javascript

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related