将 ajax 请求合并到一个模板中答案

【问题标题】：Combine ajax requests in one template将 ajax 请求合并到一个模板中
【发布时间】：2017-02-09 10:56:45
【问题描述】：

我有 2 个 Ajax 请求来获取一些 CRM 详细信息，首先我想获取系统中的所有 订单状态 为每个状态创建一个带有 ID 的容器并获取所有从另一个请求中提取的订单并将它们放入每个 STATUSES ID 容器中。

发现难以遍历状态和订单并相应地放置它们。

代码

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();

【问题讨论】：

您是否尝试将 orders.statusTypeId 与 stasuses.id 进行比较？
是的，我基本上想比较orders.statusTypeId 是否与stasuses.id 匹配，并将订单放在每个div 中，并带有自己的状态id
我有一些错误，因为我试图在 fooLoop 中运行一个函数，所以我在响应中更改为 $.each
$.each 是正确的，但您的目标选择是错误的。我添加了一个答案，看看它是否有效
对不起，我错了；你不需要$.each。我不知道我为什么这么说。我正在从答案中删除 containerID 行。

标签： javascript jquery ajax business-catalyst

【解决方案1】：

您可以使用以下命令选择目标状态容器 div：$("#ordersContainer .statusClass[id="+orders.statusTypeId+"]")

这里是getOrders()函数的完整代码：

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


 }

【讨论】：