jQueryを使用してオンザフライでAjaxデータを並べ替えて表示する

Question

私は、複数のAjaxコールを作成して、結果を集約およびソートする目的で、さまざまなプロバイダから保険クォートを取得しています。私の簡略化されたコードは次のようになります。

for (var i = 0; i < providerList.length; i++) { 
 
\t $.ajax({ 
 
\t url : "quote-request/"+ providerList[i] +".php", 
 
\t type: "GET", 
 
\t data : formData, 
 
\t dataType:"json", 
 
\t success: function(results) { 
 
\t  $.each(results, function(index, value) { \t \t \t \t \t 
 
\t  $("#results").append("<div>" + value["provider-name"] + value["policy-name"] + value["grand-total"] + "</div>"); 
 
\t  }) 
 
\t } 
 
     }); 
 
}

生成する：私は結果をしたいと思いますしかし

<div id="results"> 
    <div>ProviderA Policy1 12.34</div> 
    <div>ProviderA Policy2 9.50</div> 
    <div>ProviderB Policy1 22.76</div> 
</div> 

は、各よう壮大-総の昇順で注文しますAjax呼び出しが完了し、新しい結果がそれぞれ正しい場所に自動的に挿入されるようにします。

<div id="results"> 
    <div>ProviderA Policy2 9.50</div> 
    <div>ProviderA Policy1 12.34</div> 
    <div>ProviderB Policy1 22.76</div> 
</div> 

私が考えることができる唯一の方法は、すべてのAjax呼び出し後に各結果を配列に保存し、配列をソートして結果を出力することですが、毎回同じ配列を構築して出力する新しい見積もりが検索されます。これを行うより良い方法はありますか？

最終的なスクリプトでは約10回のAjax呼び出しが行われ、約40件の結果がロードされるため、ここでは膨大なデータセットについては話しません。また、1つまたは複数の見積もりに同じの総計がある可能性があります。その場合、最初に来るものは重要ではありません。各見積もりには、というポリシーID（）もあります。

Answer 1

はい、DOM要素を直接挿入することができれば、はるかに高速です。そして、これを行うことができます。基本的にDOMを疑似配列として使用し、DOM内のdata属性を使用して値を追跡することができます。 DOM内の「疑似配列」を検索し、新しい要素を挿入するための適切なインデックスを見つけるための短いスクリプトを書くことができます。

これはあなたのために機能するはずの短い関数です。それが動作する方法を示すためにタイマー上のいくつかのランダムなデータとフィドルでアップ：

function insertInline(providerName, policyName, grandTotal) { 
    var curDomElement; 
    var prevDomElement; 
    var insertBefore; 
    $('#results div').each(function(index) { 
    prevDomElement = curDomElement; 
    curDomElement = $(this); 
    if (parseInt(curDomElement.data('grandtotal')) > grandTotal) { 
     insertBefore = curDomElement; 
     return false; 
    } 
    }); 
    if (insertBefore) { 
    $("<div data-grandTotal='" + grandTotal + "'>" + providerName + policyName + grandTotal + "</div>").insertBefore(insertBefore); 
    } else { 
    $("#results").append("<div data-grandTotal='" + grandTotal + "'>" + providerName + policyName + grandTotal + "</div>"); 
    } 
} 

そして、あなたのサンプルでは、​​あなたはこのように、本質的にそれを使用します。

for (var i = 0; i < providerList.length; i++) { 
    $.ajax({ 
     url : "quote-request/"+ providerList[i] +".php", 
     type: "GET", 
     data : formData, 
     dataType:"json", 
     success: function(results) { 
      $.each(results, function(index, value) { 
      insertInline(value["provider-name"], value["policy-name"], parseInt(value["grand-total"])); 
      }) 
     } 
    }); 
} 

ワーキングサンプル：https://jsfiddle.net/mspinks/vnofjobu/

Answer 2

私はうまくいくかもしれないと思った。総計（ソートしているアイテム）を各divの属性に割り当てることができます。次に、jQueryを使用して、総計に基づいてresults divにアイテムを配置できます。

最初のアイテムを取得したときには、それをresults divに追加するだけですが、divに属性を与えます（これを値と呼びます）。

<div value='what-grand-total-is'></div> 

は、その後、他のすべての項目について、あなたは、現在の項目の総計を取得した結果の既存のリストを下に実行し、各項目について、壮大-合計をチェックして、あなたはその子に遭遇した場合によ現在のアイテムよりも大きな総計を持っている場合は、そのアイテムの前に現在のアイテムを配置します。

for (var i = 0; i < providerList.length; i++) { 
    $.ajax({ 
     url : "quote-request/"+ providerList[i] +".php", 
     type: "GET", 
     data : formData, 
     dataType:"json", 
     success: function(results) { 
      $.each(results, function(index, value) { 

      // no children, so append first time 
      if($('#results').children.length == 0) {  

      // assign attribute value (or whatever name you want) to div 
      $("#results").append("<div value=" + value["grand-total"] +">" + value["provider-name"] + value["policy-name"] + value["grand-total"] + "</div>"); 

      // if there are items in #results 
      } else {  
      // assuming this is returned as type integer 
      var currentTotal = value["grand-total"]; 

      // for every child 
      $('#results').children('div').each(function() { 

       // get grand-total from attribute of current div 
       var childTotal = this.attr('value');  

       // convert current div's grand total value from string to float, so we can compare values 
       childTotal = parseFloat(childTotal);  

       // if the div we're currently at is greater than or equal to the current result total 
       if (currentTotal <= childTotal) {   
       // place the current result in front of the div we're at 
       $(this).before("<div value=" + value["grand-total"] +">" + value["provider-name"] + value["policy-name"] + value["grand-total"] + "</div>");      // place the current result total before the current child 
       } 
      }); 
      } 
     }) 
     } 
    }); 
} 

このアプローチでは、AJAXリクエストの任意の数のために働く必要がありますし、また、この方法で、あなたは、配列を追跡する必要はありません、それが行くように、それは、データを追加することができます。

Answer 3

あなたは、HTML5のdata- attrubuteを持つスパンでそれぞれの結果をマークすることができます

http://html5doctor.com/html5-custom-data-attributes/

だから、あなたがそのようなdivを作成することができます：あなたがそのようなデータを盗んことができます。その後

<div id="results"> 
    <div data-provider="ProviderA" data-policy="Policy1" data-grandtotal="9.50">ProviderA Policy1 12.34</div> 
    <div data-provider="ProviderA" data-policy="Policy2" data-grandtotal="9.50">ProviderA Policy2 9.50</div> 
    <div data-provider="ProviderA" data-policy="Policy2" data-grandtotal="22.76" >ProviderB Policy1 22.76</div> 
</div> 

をこの機能を使用して：

var getDataFromDom=function(){ 
    var resultData=[]; 

    $("#results").children().each(function(idx,val){ 
    var result={ 
     'provider':$(val).data('provider'), 
     'policy':$(val).data('policy'), 
     'grand-total':parseFloat($(val).data('grandtotal')) 
    } 

    resultData.push(result); 
    }); 

    return resultData; 
} 

その後、あなたはそれをソートするためのJavascriptのソート機能を使用することができます：* data-はDIVから起因取得 ： http://www.w3schools.com/jsref/jsref_sort.asp

その後だけあなたが必要だと思うあなたが適切な並べ替えボタンをクリックしたときにです。 *アレイに格納します。 * javascriptのsort()関数を正しいコールバックで使用して並べ替えます。 * divからすべての要素を削除します。 *配列を反復し、div内に追加します。

あなたは問題ありません。

PS以前のバージョンを使用している場合は、data()の機能をattr()と置き換えて、Jquery（3.1.1）の最新バージョンを使用しました。 $(val).data('provider')は$(val).attr('data-provider')になります。