对多个API进行排序'It’按桌子上的价格

Sorting multiple API's by price in a table

本文关键字：It API 排序      更新时间：2023-09-26

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

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

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

这两个api的价格都是XX.XX英镑。

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

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

表.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);
           }
        });

在得到两个结果集之前不要碰表，这只会使排序更加困难。定义一些全局结果数组，并使用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
    } 
});
相关文章：