如何修改此代码以便我不必对对象进行排序？

Question

我正在使用以下代码/数据来显示每个房子中收入最高的学生名单。

---

数据

附件1：User_Info是一个对象数组

附件2：User_Info是对象的数组，例如

附件3：Database_Info是一个对象，就像这样

---

代码

    HPAnalysisObject.dispHPTotals = function(User_Info, Database_Info) {
        // See attachments 1 and 2
        console.log(User_Info);
        // See attachment 3
        console.log(Database_Info);

        // "label" is just a text title, like "Eagles"
        var html = '<h2>' + HPAnalysisObject.label + '</h2>' + 
            // "TotalPoints" is an integer figure
            '<div id="total">' + Database_Info.TotalPoints + '</div>';

        // create the table to display
        html += '<table><tr><th class="name">Name</th><th class="points">Points</th></tr>';

        // use "for, in" to access the value of the object key (which is the user's ID)
        for (var id in Database_Info.UserDetails) {
            html += '<tr>';
            for (var i = 0; i < User_Info.length; i++) {
                if (User_Info[i].id == id) {
                    // if the User_Info and Database_Info objects match up on the User's ID, add table cells to our html variable
                    html += '<td class="name">' + User_Info[i].firstname + ' ' + User_Info[i].surname + '</td><td class="points">' + Database_Info.UserDetails[id] + '</td>';
                }
            }
            html += '</tr>';
        }

        html += '</table>';

        $('div#display').html(html);
    };

---

问题

奇怪的是，在Firefox中，这些学生以正确的数字顺序显示，因为我的PHP脚本收到了学生。

但是，在谷歌浏览器和Internet Explorer中，它们看似随机的顺序！

我的第一个想法是命令对象，但是在这里阅读了几个问题，看起来订购对象并不是最好的做法。

我是否可以重写此代码，以便显示相同的表格数据 - 每个浏览器上的顺序正确？

提前致谢，

Answer 1

在大多数语言中，您不能假设对象属性以任何特定顺序发生。

一种解决方案可能是在UserDetails中为每个条目添加一个访问者，例如：

的UserDetails = {   ID：{     访问：1，     id：ID   } }

然后对UserDetails [ID] .accessor。

上的记录进行排序

另一个可能是将UserDetails构造为一个元素数组，它将键值编码为“key：value”，将每个检索到的元素拆分为/：/，如下所示：

[   “90030：87”   ... ]

修改

假设

var userDetails={
                  a:{i:3,key:'third'},
                  b:{i:1,key:'first'},
                  c:{i:2,key:'second'}
};

其中i是访问者，您可以使用

创建一个排序的对象数组

var sortedObjs=Object.keys(userDetails)
                     .map(function(k){ return userDetails[k] })
                     .sort(function(left,right){ return left['i']-right['i'] });

从userDetails中提取键，通过map创建一个键控元素数组，并按照其访问者值对结果元素进行排序，以便

console.log(sortedObjs.map(function(elt){return elt.key}).join(','))

将打印到控制台：

first,second,third

Answer 2

对象是键到值的未排序映射，它们的顺序永远不会得到保证。

当我得到这样的东西时，我喜欢使用ID作为数字键来构建一个数组。例如，PHP中的类似内容：

$out = Array();
while($row = database_get_row($set)) { // replace with your choice of database library
    $out[$row['id']] = $row;
}
ksort($out);
$out = array_values($out);

通过这种方式，您可以确保数组按ID增加的顺序排列，然后将该数组传递给JavaScript以便在for(i=0;i<l;i++)循环中使用。

Answer 3

您必须使用数组包装器对Database_Info.UserDetails进行排序：

// test data using same data as example but with no order
var Database_Info = { 
  UserDetails : { 
    137473 : 87, 
    90132 : 126, 
    90057 : 79, 
    90030 : 87, 
    90095 : 82 
  }
}

var objWrapper = [];
for (key in Database_Info.UserDetails) {
  objWrapper.push(key);
}
objWrapper.sort(); // default sort = numeric order ascending

for (a = 0, b = objWrapper.length; a < b; a++) {
  var userInfo = Database_Info.UserDetails[objWrapper[a]];
  // do something interesting
  console.log(userInfo);
}

Answer 4

我决定将我的对象包装在一个可排序的数组中。这似乎可以解决问题。

HPAnalysisObject.dispHPTotals = function(User_Info, Database_Info) {            
    // make a sortable array
    var Combined_Info = [];

    // "label" is just a text title, like "Eagles"
    var html = '<h2>' + HPAnalysisObject.label + '</h2>' + 
        // "TotalPoints" is an integer figure
        '<div id="total">' + Database_Info.TotalPoints + '</div>';

    // create the table to display
    html += '<table><tr><th class="name">Name</th><th class="points">Points</th></tr>';

    // use "for, in" to access the value of the object key (which is the user's ID)
    for (var id in Database_Info.UserDetails) {

        for (var i = 0; i < User_Info.length; i++) {
            if (User_Info[i].id == id) {
                var StudentInfo = { name: User_Info[i].firstname + ' ' + User_Info[i].surname, points: Database_Info.UserDetails[id] };
                Combined_Info.push(StudentInfo);
            }
        }

    }

    Combined_Info.sort( function(a, b) {
        return b.points - a.points;
    });

    for (var i = 0; i < Combined_Info.length; i++) {
        html += '<tr>';
        html += '<td class="name">' + Combined_Info[i].name + '</td><td class="points">' + Combined_Info[i].points + '</td>';
        html += '</tr>';
    }

    html += '</table>';

    $('div#display').html(html);
};