在表格中按价格对多个 API 进行排序

Question

这会令人困惑，但可能是一个简单的答案。

我有两个 json 格式的 api 链接。将数据拉入表中。

目前，所有 API1 都先放入表中，然后再放入 API2 下方。

这两个 api 的价格均为 £XX.XX 格式。

我正在寻找的是按价格排序的表格。因此，例如 API1 的前 2 个结果是最便宜的，然后是 API2，然后是 API1，依此类推。

我已经在下面发布了我的代码供您查看。

表格.html

<table class="pull-left table-fill" id="Bananna">
  <thead>
  <tr>
    <th class="table-hover">Vendor</th>
    <th class="table-hover">Section</th>
    <th class="table-hover">Amount Of Tickets</th>
    <th class="table-hover">Price Per Ticket</th>
    <th class="table-hover">Link</th>
</tr>
</thead>
</table>

 </body>
 <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
 <script src="js/1.js"></script>
 <script src="js/2.js"></script>

1.js 和 2.js 完全一样。

       $.ajax({
      type: 'GET',
      crossDomain: true,
      dataType: 'json',
      url: 'API LINK HERE',

        success: function (json) {
           //var json = $.parseJSON(data);

           for(var i =0;i < json.results.length;i++) {

             var section = json.results[i].section;

             var no = json.results[i].avalible;

             var price = json.results[i].price;

             var button = "<button class='redirect-button' data-url='viagogo.com'>Compare</button>";


             $("#Bananna").append("<tbody><tr><td>"+section+"</td><td>"+no+"</td><td>"+price+"</td><td>"+button+"</td></tr></tbody>");
 $("#Bananna").find(".redirect-button").click(function(){
   location.href = $(this).attr("data-url");
  });
               }
         },
           error: function(error){
               console.log(error);
           }
        });

Answer 1

在获得两个结果集之前不要触摸表格，这只会使排序变得更加困难。定义一些全局结果数组并使用 concat 使用 AJAX 数据填充它。

var results = [];
//on success of each AJAX call
results = results.concat(json.results);

为确保在排序之前已加载两组数据，只需将第二个 AJAX 调用包含在第一个的完整函数中，或者如果您将来可能有其他 AJAX 请求，请使用递归。

获得所有数据后，您可以按价格排序：

results.sort(function(a,b){
    return a.price-b.price;
});

最后，像以前一样遍历排序后的数组并追加。

---

编辑：

与其创建一堆完全相同的文件，不如定义一个递归函数来加载 API url 数组，如下所示：

function loadURLs(urls,callback){
    //are there more urls to AJAX?
    if(urls.length==0){
       //no: call the callback function
       callback();
    }else{
        //yes: make the AJAX call...
        $.ajax({
            type: 'GET',
            crossDomain: true,
            dataType: 'json',
            url: urls[0],
            success: function (json) {
                //put data into the results array
                results = results.concat(json.results);
                //load the remaining urls
                loadURLs(urls.slice(1),callback);     
            }
        }
    }
}

此函数接受 URL 链接数组。它将一一遍历并将json数据加载到全局结果数组中。在它浏览完所有链接后，它将调用回调函数。在回调函数中，您可以对数组进行一次排序，然后附加到您的表中。你最终的 js 看起来像这样：

//define loadURLs function here

//global results array
var results = [];
//define all your links links here
var myURLs = ['API LINK 1','API LINK 2'];
loadURLs(myURLs,function(){
   //all json data has been loaded, sort
   results.sort(function(a,b){
        return a.price-b.price;
    });
    //iterate over the sorted array and append
    for(var i=0;i<results.length;i++){
        //append to table
    } 
});