How to return the response from multiple asynchronous function calls?

Question

I have a function where I do multiple asynchronous function calls. handleData function returns a Json object. I need to use these different Json objects in the draw method. Any idea how to pass result values to the draw method? I would appreciate any help. Here is my code:

var publicationData = new Array();
var researchers = [];
var year = [];
var title = [];
var pub = [];
var dataJson = [];

callServerAsync();

function callServerAsync(){

    $.get('Year2014.html').then(function(responseData) {
        var result1 = handleData(responseData, dataJson);

    });
    $.get('tauchi_publications.html').then(function(responseData) {

        var result2 = handleData(responseData, dataJson);

    });
    //TO-DO
    //draw(result1, result2);

}
function handleData(responseData, dataJson){

    var htmlObject = document.createElement('div');
    htmlObject.innerHTML = responseData;
    pub = htmlObject.getElementsByClassName("julkaisu");
    getPublicationData(pub);
    getResearchersYearTitle(publicationData);
    dataJson = createJson(researchers,year,title);
    return dataJson;
}

function draw(result1,result2){
    result1.concat(result2);
}

score 3 · Answer 1 · answered Apr 12 '15 at 20:23

3

Use promises! jQuery's $.get returns a promise for its return value. jQuery contains a $.when method for waiting for multiple deferreds.

function callServerAsync(){

    var p1 = $.get('Year2014.html').then(function(responseData) {
        return handleData(responseData, dataJson);
    });
    var p2 = $.get('tauchi_publications.html').then(function(responseData) {
         return handleData(responseData, dataJson);
    });
    // the `return` here is just for good measure
    return $.when(p1, p2).then(function(result1, result2){
          // all your data available, can use it here.
          // It's in the function arguments
          draw(result1, result2);
    });

}

answered Apr 12 '15 at 20:23

Benjamin Gruenbaum

270,886
87
504
504

When I print the result1 and result2 contents in the draw method, I see that they have the same content. Json objects are concatenated without using concat method. Why do you think it is like that? – supaplex Apr 12 '15 at 20:34
I can make an isolated fiddle to show you that the above code works as advertised if that'd assure you. It looks like your `handleData` function is wrong - why does it take the dataJson parameter? In general I don't understand what you're doing there. – Benjamin Gruenbaum Apr 12 '15 at 20:37

score -1 · Answer 2 · answered Apr 12 '15 at 20:24

I think you can do something like this. Where when the call finishes, it checks if the other call/results exists, if not, then it does nothing. This way the last function will actually draw it.

function callServerAsync(){
  var result1, result2;
  $.get('Year2014.html').then(function(responseData) {
    result1 = handleData(responseData, dataJson);
    if(result1 && result2) {
      draw(result1, result2);
    }
  });
  $.get('tauchi_publications.html').then(function(responseData) {
    result2 = handleData(responseData, dataJson);
    if(result1 && result2) {
      draw(result1, result2);
    }
  });
}

How to return the response from multiple asynchronous function calls?

2 Answers2