排序出现Javascript错误

Javascript error with sort

本文关键字：错误 Javascript 排序更新时间：2023-09-26

我有如下所示的代码，

我从一个开发者那里得到了这个，他因为有家庭问题而大发雷霆

基本上，下面的代码应该获取json结果，并在对价格进行排序后将其形成一个表，然后将其放入表中。

代码在这里

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

访问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");
            });
        }
    }