Create an array based on AJAX response using multiple requests values

I creating my first application using Business Catalyst API to GET, POST, PUT, DELETE requests using AJAX, the problem I have is that sometimes I need to grab data from different GET calls to generate new requests and apparently I am a bit lost on how to efficiently do it.

Lets says I have a block of ajax calls getting the API data in JSON format like so:

function createOrderStatuses(){
  var access_token = BCAPI.Helper.Site.getAccessToken();
  $.ajax({
      url: "/webresources/api/v3/sites/current/orderstatuses",
      type: "GET",
      connection: "keep-alive",    
      contentType: "application/json",
      headers: APIauthorization,
      success: function (status) {
      console.log(status);
       $.each(status.items, function(items, statuses){
         var statusTemplate = '<ul class="large-12 columns margin-distributed statusClass" id="'+ statuses.id +'"><h4 class="lato-bold">' + statuses.label  + '</h4></ul>';
         var changeSelection = '<select class="orderCurrentStatus"><option selected value="'+statuses.id+'">'+status.label+'</option></select>';
        if (statuses.label !== "EXCHANGE FEE PAID"){
         $("#ordersContainer").append(statusTemplate);
         $("#ordersContainer li span.changeStatus[id="+statuses.id+"]").append(changeSelection);
        }
       });
   }
  });

Then I am creating my orders Like so:

function getOrders(){  
  var dateFrom = appSettings.dateFrom+"T00:00:00";
  var dateTo =  appSettings.dateTo+"T00:00:00";
   var orderData;
   $.ajax({
      url: '/webresources/api/v3/sites/current/orders?fields=id,entityId,categoryId,statusTypeId,discountCodeId,paymentMethodTypeId,taxCodeId,giftVoucherId,assignedUserId,name,countryCode,shippingPrice,shippingTaxRate,discountRate,giftVoucherAmount,totalPrice,shippingDescription,shippingAttention,shippingInstructions,quote,invoiced,invoiceNumber,invoiceDate,createDate,lastUpdateDate,destinationAddressIsResidential,isIntermediate,shippingRateKey,status,discountCode,workflow,customer,company,taxCode,assignedUser&skip=0&limit=500&order=-invoiceNumber&where={"createDate":{"$gte":"'+dateFrom+'"},"invoiceDate":{"$lte":"'+dateTo+'"}}',
      type: "GET",
      connection: "keep-alive",    
      contentType: "application/json",
      headers: APIauthorization,
      success: function (orders) {
      console.log(orders);
         orderData = orders;

       $.each(orders.items, function(order){

        var createDate = new Date(order.invoiceDate);
        var orderTemplate = 
             '<li class="f-16 expanded callout medium-collapse mid-gray-bg ordersList"><span class="large-4 medium-4 small-12 columns ordername"><i class="fa fa-file-text-o"></i> <a class="gray" href="https://bestkilts.worldsecuresystems.com/CRM/OrderDetailsv2.aspx?EntityID='+order.entityId+'&EntityType=1001&OrderID='+order.id+'"> '+ order.name+"/"+order.countryCode+'</a></span><span class="large-2 medium-2 small-4 columns date center">'+ createDate.getFullYear() + "-" + ("0" + (createDate.getMonth() + 1)).slice(-2) + "-" + ("0" + createDate.getDate()).slice(-2) +'</span><span class="large-1 medium-2 small-4 columns amount center">£'+order.totalPrice+'</span><span class="large-1 medium-1 small-4 columns invoice center">'+order.invoiceNumber+'</span><span class="large-2 medium-2 small-6 columns action center f-12">'+order.lastUpdateDate+'</span><span class="large-2 medium-3 small-6 columns action center changeStatus" id="'+order.statusTypeId+'"></span></li>';   
        if(orders){
         $("#ordersContainer .statusClass[id="+order.statusTypeId+"]").append(orderTemplate);
         var invoicesCounter = $('.ordersList').length;
         $("#ordersCount").text(invoicesCounter);
        }
         return "order";
       });
   }
  });// getOrders retrieve

But if I want to get a value/data from getOrders(); e.g order.id passed into a new function getCustomers() and use to compile the whole thing as one result I can’t get about doing it!?

function getCustomers(order){
    var orderInfo = getOrders();
    $.ajax({
            url: '/webresources/api/v3/sites/current/orders/'+orderInfo.id+'?fields=status,discountCode,workflow,customer,taxCode', //NEED THE ID FROM ORDERS HERE
            type: "GET",
            connection: "keep-alive",    
            contentType: "application/json",
            headers: APIauthorization,
            success: function (customer) {
            console.log(customer);
              var orderCustomer = "" ;
             $.each(customer.items, function(customer){
              orderCustomer = customer;  
            $("#ordersContainer").prepend('<span> class="customer">"'+orderCustomer.name+'"</span>');
                 });
             }
            });// get customer name for order       
}
getCustomers();

Conclusion collecting the information from different requests and try to use them in one single result is getting anywhere, I need a solution where I can get all the data from the 3 functions/calls or more if comes to happen! and create an orderDeployment() function combining all the data from the 3 into the ordersContainer.

Your help is much apreciated, thanks in advanced..


Source: stackoverflow-javascript