Combine ajax requests in one template

Question

I have 2 Ajax request to GET some CRM details, firstly I would like to get all the orders statuses in the system create a container with an ID for each one of the statuses and get all the orders pulled from another request and place them in each STATUSES ID container.

Found difficulty to loop through the statuses and orders and place them accordingly.

Code

function createOrderStatuses(){
  var access_token = BCAPI.Helper.Site.getAccessToken();
  var request = $.ajax({
      url: "/webresources/api/v3/sites/current/orderstatuses",
      type: "GET",
      connection: "keep-alive",    
      contentType: "application/json",
      headers: _authorization
  });
  request.done(function (msg) {
      console.log(msg);
      //var orderStatusesArray = msg[];
      for (var i = 0; i < msg.items.length; i++){
           var statuses = msg.items[i];
           var statusTemplate = '<div class="large-12 columns margin-distributed statusClass" id="'+ statuses.id +'"><h4 class="lato-bold">' + statuses.label  + '</h4></div>';

      if (statuses.label !== "EXCHANGE FEE PAID"){
        $("#ordersContainer").append(statusTemplate);
      }else{
        //$(".orderStatuses").append('<option value="'+ statuses.id +'">' + statuses.label  + '</option>');
      }
    }//looping and displaying statuses

   getOrders();

  });//request END


  function getOrders(){

     var access_token = BCAPI.Helper.Site.getAccessToken();
     var request = $.ajax({
         url: "/webresources/api/v3/sites/current/orders",
         type: "GET",
         connection: "keep-alive",    
         contentType: "application/json",
         headers: _authorization
     });
     request.done(function (msg) {
         console.log(msg);
         var containerID = $('.statusClass').each(function(){ $(this).attr('id'); });

         for (var i = 0; i < msg.items.length; i++){
           var orders = msg.items[i];

           var orderTemplate = '<div class="large-12 columns margin-distributed '+ orders.statusTypeId +'"><h5>' + orders.name  + '</h5></div>';
           var orderTemplateClass = orderTemplate.find('div[class*="'+orders.statusTypeId+'"]');

           if  ( orderTemplateClass === containerID ){          
                       $(containerID).append(orderTemplate); 
               }// end IF       

    }//looping orders

     }); 
  }//GET ORDERS END


 }
 createOrderStatuses();

Answer 1

You can select the target status container div with this: $("#ordersContainer .statusClass[id="+orders.statusTypeId+"]")

Here is the full code of getOrders() function:

function getOrders(){

     var access_token = BCAPI.Helper.Site.getAccessToken();
     var request = $.ajax({
         url: "/webresources/api/v3/sites/current/orders",
         type: "GET",
         connection: "keep-alive",    
         contentType: "application/json",
         headers: _authorization
     });
     request.done(function (msg) {
         console.log(msg);

         for (var i = 0; i < msg.items.length; i++){
           var orders = msg.items[i];

           var orderTemplate = '<div class="large-12 columns margin-distributed '+ orders.statusTypeId +'"><h5>' + orders.name  + '</h5></div>';


    $("#ordersContainer .statusClass[id="+orders.statusTypeId+"]").append(orderTemplate)



    }//looping orders

     }); 
  }//GET ORDERS END


 }