How to merge and bind the results of two different "listdata.svc" calls to a jquery Datatable (datatable.js)

Question

I have to query two different document libraries with some metadata columns and show the results in single grid. Both the document libraries have identical columns. I am using Datatable.js for displaying the results.

Below is the sample API calls i am preparing.

apiURL1 = "/_vti_bin/listdata.svc/DocumentLibrary01/?$select=Name,CompanyID,DocumentDate,DocumentNumber&$filter=(substringof('" +prmCompanyId+"', CompanyID))";

apiURL2 = "/_vti_bin/listdata.svc/DocumentLibrary02/?$select=Name,CompanyID,DocumentDate,DocumentNumber&$filter=(substringof('" +prmCompanyId+"', CompanyID))";

With single call i am binding the data to data-table as follows,

var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + apiURL1,
type: "GET", dataType: "json",
headers: {  Accept: "application/json;odata=verbose" } });

call.done(function (data,textStatus, jqXHR){
datatableObject = $('#resultGrid').dataTable({
    "iDisplayLength": 25,
    "bDestroy": true,   
    "bProcessing": true,
    "aaData": data.d.results,
    "aaSorting": [[ 2, "desc" ]],
    "aoColumns": [ 
        {   "mData": "__metadata" ,
            "mRender":function(data, type, full)
            {                                               
                var startIndex = data.media_src.lastIndexOf("/") + 1;                                           
                var fileName = data.media_src.substr(startIndex);
                return '<a href="'+data.media_src+'" target="_blank">'+fileName+'</a>';
            }
        },
        { "mData": "CompanyID" },                                                                           
        { "mData": "DocumentDate" },    
        { "mData": "DocumentNumber"}                                                                                    
    ]
});  });

call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving data : " + jqXHR.responseText); });

My idea is to make two ajax calls separately. Merge the results of both the calls and then bind them to the Data-table.

Somehow i am missing the best way to do this. Any help will be greatly appreciated.

Answer 1

jQuery $.when() function did the trick.

Got the solution by following this article.

Below is how this can be done.

var call1 = $.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + apiURL1,
    type: "GET",
    dataType: "json",
    headers: {  Accept: "application/json;odata=verbose" },
    success: successHandler,
    error: errorHandler
});

var call2 = $.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + apiURL2,
    type: "GET",
    dataType: "json",
    headers: {  Accept: "application/json;odata=verbose" },
    success: successHandler,
    error: errorHandler
}); 

function successHandler(a) {
    results = a.d.results;

    if (allResults.length > 0)
        allResults = allResults.concat(results);

    else
        allResults = results;        
}

function errorHandler(data, errorCode, errorMessage) {
    alert("Error retrieving data : " + errorMessage);        
};  

$.when(call1, call2).done(function (data1, data2)
{
    datatableObject = $('#resultGrid').dataTable({      
        "iDisplayLength": 25,
        "bDestroy": true,   
        "bProcessing": true,
        "aaData": allResults,
        "aaSorting": [[ 2, "desc" ]],
        "aoColumns": [  
            { "mData": "column1" }, 
            { "mData": "column2" },                                                                         
            { "mData": "column3" }, 
            { "mData": "column4"}                                                                                           
        ]           
    });
});