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

Question

我正在使用下面的代碼/數據來顯示每個House中我們最高收入學生的列表。

---

數據

附件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，這些學生顯示在c正確的數字順序，因爲學生是從我的PHP腳本中收到的。

但是，在Google Chrome瀏覽器和Internet Explorer中，它們以看似隨機的順序顯示！

我的第一個想法是命令對象，但在這裏閱讀了幾個問題之後，似乎訂購對象並不是最佳實踐。

我可以重寫此代碼，以便顯示相同的表格數據 - 只需在每個瀏覽器上按正確的順序？

由於提前，

Answer 1

在大多數語言中，您不能假定對象屬性以任何特定順序出現。

一種解決方案是爲存取中的UserDetails如添加到每個條目：

的UserDetails = { ID：{ 存取：1， ID：ID } }

然後對UserDetails [ID] .accessor中的記錄進行排序。

另一可能構造的UserDetails作爲編碼密鑰值作爲元素的數組「鍵：值」，對在將所獲取的各元素/：/如：

[ 「90030：87」 。 .. ]

EDIT

假設

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提取密鑰對象的排序後的數組，創建經由地圖鍵控元件的陣列和排序可以通過存取值所得到的元件，使得

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