1

我正在使用以下代码/数据来显示我们每个学院中收入最高的学生的列表。

数据

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

User_Info 是一个对象数组，例如这个附件2：User_Info 是这样一个Objects 的数组

Database_Info 是这样的对象 附件 3：Database_Info 是这样的 Object

编码

    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 脚本接收的。

但是，在 Google Chrome 和 Internet Explorer 中，它们以看似随机的顺序出现！

我的第一个想法是订购对象，但是在这里阅读了一些问题后，似乎订购对象并不是最佳实践。

我可以重写这段代码，以便在每个浏览器上以正确的顺序显示相同的表格数据吗？

提前致谢，

4

4 回答 4

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
于 2012-09-11T15:46:47.997 回答
0

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

当我得到这样的东西时，我喜欢使用 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++)循环使用。

于 2012-09-11T15:35:09.420 回答
0

我决定将我的对象包装在一个可排序的数组中。这似乎起到了作用。

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);
};
于 2012-09-12T10:04:02.223 回答
0

您必须使用数组包装器对 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);
}
于 2012-09-11T16:02:26.673 回答