我該如何修改此代碼，以便不必對對象進行排序？

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

但是，在Google Chrome和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'}
};

在我是訪問者的地方，您可以使用以下方法創建對象的排序數組

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