Javascript 排序错误

Question

我有如下所示的代码，

我是从一个因为家庭问题而离开的开发者那里得到的

基本上下面的这段代码应该获取 json 结果，并在对价格排序后将它们组成 table，然后将其放入 table.

代码如下

//first define a function
var sortTable = function () {
        $("#tableid tbody tr").detach().sort(function (a, b) {
            //substring was added to omit currency sign, you can remove it if data-price attribute does not contain it.
            return parseFloat($(a).data('price').substring(1)) - parseFloat($(b).data('price').substring(1));
        })
        .appendTo('#tableid tbody');
    };
//include two files where rows are loaded
    //1.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='LINK'>Compare</button>";
               $("#tableid tbody").append("<tr data-price='" + price + "'><td>" + section + "</td><td>" + no + "</td><td>" + price + "</td><td>" + button + "</td></tr>");
                $("#tableid").find(".redirect-button").click(function () {
                    location.href = $(this).attr("data-url");
                });
            }
            sortTable();
        },
        error: function (error) {
            console.log(error);
        }
    });
    //and here is the 2nd js file
    $.ajax({
        type: 'GET',
        crossDomain: true,
        dataType: 'json',
        url: '2nd api',
        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].amount;
                var button = "<button class='redirect-button' data-url='LINK'>Click Here</button>";
                $("#tableid tbody").append("<tr data-price='" + price + "'><td>" + section + "</td><td>" + no + "</td><td>" + price + "</td><td>" + button + "</td></tr>");
                $("#tableid").find(".redirect-button").click(function () {
                    location.href = $(this).attr("data-url");
                });
            }
            sortTable();
        },
        error: function (error) {
            console.log(error);
        }
    });

Answer 1

访问 DOM 以获取需要排序的数据，在我看来是一种不好的做法。更糟糕的是，当您首先获得原始 JSON 形式的结果时（在 ajax 调用的成功回调中）。你的成功函数应该做这样的事情

    success: function (json) {
        //first sort the results - or better store these results somewhere
        //and use that as a data store that is responsible for what is rendered in the DOM
        json.results.sort(function(a,b) {
            //using substring and parseFloat just like it was done in sortTable 
            //assuming price field has prices as strings with currency symbol in the first place
            return parseFloat(a.substring(1)) - parseFloat(b.substring(1))
        });
        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].amount;
            var button = "<button class='redirect-button' data-url='LINK'>Click Here</button>";
            $("#tableid tbody").append("<tr data-price='" + price + "'><td>" + section + "</td><td>" + no + "</td><td>" + price + "</td><td>" + button + "</td></tr>");
            $("#tableid").find(".redirect-button").click(function () {
                location.href = $(this).attr("data-url");
            });
        }
    }

Javascript 排序错误

Javascript error with sort

javascript

api

json