帶有小胡子排序的jQuery數組問題

Question

我使用Mustache（0.7.2 /）/ jQuery（2.1.3）創建了一些模板，並希望根據下拉列表中的選擇對數組進行排序。 我什至無法使用Mustache刷新數組。

我不是開發人員，因此大部分情況下我都是在黑暗中拍攝。 只是想讓我的原型快而臟。 這是我試圖做的愚蠢的例子。

https://codepen.io/gzuiderweg/pen/XvpXxy

小胡子模板：

    <script type="text/template" id="sumview">

    {{#panels}}

        <div class="row">
            <div class="col-4">{{company-name}}<br/>{{prod-name}}</div>
            <div class="col-2">{{version-count}}</div>
            <div class="col-2">{{issue-count}}</div>
            <div class="col-2">{{injury-count}}</div>
            <div class="col-2">{{malfunction-count}}</div>
            </div>
        </div>
        {{/panels}}

     </script>

HTML：

    <select id="sort">
    <option selected>Sort By</option>
    <option value="company-name">Company Name</option>
    <option value="prod-name">Product Name</option>
    <option value="version-count">Version Count</option>
    <option value="issue-count">Issue Count</option>
    <option value="injury-count">Injury Count</option>
    <option value="malfunction-count">Malfunction Count</option>
    </select>

    <div class="view-summary" id="sumview-container">
    </div>

jQuery的

    var template = $('#sumview').html();  
    var outputsum = $('#sumview-container');
    var data = {

    "panels": [

    { "company-name": "Acme", "prod-name": "productA", "version-count": "2", "issue-count": "1", "injury-count": "5", "malfunction-count": "10" },

    { "company-name": "BankA", "prod-name": "productB", "version-count": "15", "issue-count": "6", "injury-count": "2", "malfunction-count": "8" },

    { "company-name": "CorpA", "prod-name": "productC", "version-count": "6", "issue-count": "9", "injury-count": "4", "malfunction-count": "1" }


       ]
     }


    var resultSum = Mustache.render(template, data)
        outputsum.append(resultSum);

我嘗試過各種jquery排序功能，例如：

    $("#sort").on("change", function () {

    data.sort(function(a, b){
        var a1= a.company-name, b1= b.company-name;
        if(a1== b1) return 0;
        return a1> b1? 1: -1;

    });

Answer 1

sort方法屬於Array原型。 在您的情況下，您正在嘗試對實際上是對象的 data進行排序。 您想將排序目標放在data.panels屬性上，對該數組進行排序，然后將data.panels設置為已排序的數組。

我認為，當您要按數字排序時，真正的問題浮出水面。 排序功能需要能夠區分數字和字符串。

另外，您可能還想確定要對數字進行排序的方向。 在此示例中，我默認為降序。 您可以根據自己的需要進行更改。

 const data = { "panels": [ { "company-name": "BankA", "prod-name": "productB", "version-count": "15", "issue-count": "6", "injury-count": "2", "malfunction-count": "8" }, { "company-name": "Acme", "prod-name": "productA", "version-count": "2", "issue-count": "1", "injury-count": "5", "malfunction-count": "10" }, { "company-name": "CorpA", "prod-name": "productC", "version-count": "6", "issue-count": "9", "injury-count": "4", "malfunction-count": "1" } ] } const sortBy = (key, array) => { return array.sort((a, b) => { const numericA = Number(a[key]); const numericB = Number(b[key]); if (!isNaN(numericA) && !isNaN(numericB)) { // a - b ascending sort // b - a descending sort return numericB - numericA; } return a[key].toLowerCase().localeCompare(b[key].toLowerCase()); }) } const renderTemplate = () => { $('#sumview-container').html(Mustache.render($('#sumview').html(), data)); } $("#sort").on("change", function() { sortBy($(this).val(), data.panels); renderTemplate(); }) renderTemplate(); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="sort"> <option selected>Sort By</option> <option value="company-name">Company Name</option> <option value="prod-name">Product Name</option> <option value="version-count">Version Count</option> <option value="issue-count">Issue Count</option> <option value="injury-count">Injury Count</option> <option value="malfunction-count">Malfunction Count</option> </select> <div id="sumview-container"></div> <script type="text/template" id="sumview"> {{#panels}} <div class="row"> <div class="col-4">{{company-name}}<br/>{{prod-name}}</div> <div class="col-2">{{version-count}}</div> <div class="col-2">{{issue-count}}</div> <div class="col-2">{{injury-count}}</div> <div class="col-2">{{malfunction-count}}</div> </div> {{/panels}} </script>