Сортировка нескольких API по цене в таблице

Question

Это будет путать, но, вероятно, легкий ответ.

У меня есть две ссылки api в формате json. Вытягивание данных в таблицу.

На данный момент все API1 кладется в таблице первой и ниже этого API2 затем помещать его в.

Оба АФИ имеют цены в формате £ xx.xx.

Что я ищу, это таблица, которую нужно сортировать по цене. Так что, например, первые два результата API1 являются самыми дешевыми, затем API2, затем API1 и так далее, и так далее.

Я разместил свой код ниже, чтобы вы могли посмотреть.

Table.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

Не трогайте стол, пока не получите оба набора результатов, это просто затруднит сортировку. Определите некоторый глобальный массив результатов и заполните его данными AJAX, используя concat.

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

Наконец, шаг через отсортированный массив и добавить, как вы делали раньше.

---

EDIT:

Вместо того, чтобы сделать кучу файлов, которые идентичны, определяют рекурсивную функцию для загрузки массива 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 
    } 
});