CODEWITHSUNDEEP
javascriptjqueryajaxbusiness-catalyst
Ricardo Alves
Ricardo Alves

Reputation: 561

How to use data from multiple AJAX requests into different functions or create an array of values to be used globally

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.

Let's say 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.

How can I do this?

Upvotes: 0

Views: 808

Answers (1)

rd3n
rd3n

Reputation: 4560

$.ajax() returns a jqXHR (jQuery superset of XMLHttpRequest) object which implements the jQuery Promise interface (see Deferred object for more information).

I don't know if you are familiar with the concept of Promise, but even if jQuery has its own implementation of Promise, the definition from MDN documentation is also valid for jQuery implementation:

The Promise object is used for asynchronous computations. A Promise represents a value which may be available now, or in the future, or never.

So you can use:

  • .then() to chain asynchronous operations
  • $.when() if you need to wait for the result of multiple asynchronous operations before proceeding, eg.
$.when($.ajax('/page1.php'), $.ajax('/page2.php')).done(function(a1, a2){
    // eg. Perform another $.ajax call based on the results a1 and a2
});

Simple example, where a list of users is loaded first, then the posts of each user are retrieved based on the user id:

var root = 'https://jsonplaceholder.typicode.com';
			
// Returns 10 users
function getUsers() {
  return $.ajax({
    url: root + '/users',
    method: 'GET'
  });
}

// Returns posts based on user id
function getUserPosts(userId) {
  return $.ajax({
    url: root + '/posts?userId=' + userId,
    method: 'GET'
  });
}

// Once users list is retrieved, we can fetch posts for each users 
getUsers().then(function(users) {
  console.log('Users retrieved from API:', users);
  $.each(users, function(i, user) {
    getUserPosts(user.id).then(function(posts) {
      console.log('Posts fetched for user', user.name, posts);
    });
  });
});
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

Upvotes: 2

Related Questions