通過嵌套屬性的值排序對象屬性

Question

我目前正在嘗試按屬性屬性的值對對象屬性進行排序，如果這樣做合理的話。

var obj = { 
    1: { name: "Mike", surname: "Smith"}, 
    2: { name: "Albert", surname: "Einstein"}, 
    3: { name: "Steve", surname: "Jobs"} 
} 

說我想按姓氏這些屬性的順序進行排序，以便最終的結果是

var obj = { 
    2: { name: "Albert", surname: "Einstein"}, 
    3: { name: "Steve", surname: "Jobs"}, 
    1: { name: "Mike", surname: "Smith"} 
} 

當然必須有比把所有的姓氏成這樣其他的一種優雅的方式數組排序，然後重建對象。

Answer 1

請試試這個代碼：

var arr = [ 
 
    { 
 
     f_name: 'George', 
 
     l_name: 'Washington', 
 
     age: 279 
 
    }, 
 
    { 
 
     f_name: 'Abraham', 
 
     l_name: 'Lincoln', 
 
     age: 202 
 
    }, 
 
    { 
 
     f_name: 'Barack', 
 
     l_name: 'Obama', 
 
     age: 50 
 
    } 
 
]; 
 

 
$(function() { 
 
    $('#headings th').click(function() { 
 
     var id = $(this).attr('id'); 
 
     var asc = (!$(this).attr('asc')); // switch the order, true if not set 
 
     
 
     // set asc="asc" when sorted in ascending order 
 
     $('#headings th').each(function() { 
 
      $(this).removeAttr('asc'); 
 
     }); 
 
     if (asc) $(this).attr('asc', 'asc'); 
 
     
 
     sortResults(id, asc); 
 
    }); 
 
     
 
    showResults(); 
 
}); 
 

 
function sortResults(prop, asc) { 
 
    arr = arr.sort(function(a, b) { 
 
     if (asc) return (a[prop] > b[prop]); 
 
     else return (b[prop] > a[prop]); 
 
    }); 
 
    showResults(); 
 
} 
 

 
function showResults() { 
 
    var html = ''; 
 
    for (var e in arr) { 
 
     html += '<tr>' 
 
      +'<td>'+arr[e].f_name+'</td>' 
 
      +'<td>'+arr[e].l_name+'</td>' 
 
      +'<td>'+arr[e].age+'</td>' 
 
     +'</tr>'; 
 
    } 
 
    $('#results').html(html); 
 
}

table { 
 
    margin: 3px; 
 
} 
 
table th { 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 
table th, table td { 
 
    padding: 3px; 
 
    border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Click on the table headings to sort the results. 
 
<table> 
 
    <thead id="headings"> 
 
     <tr> 
 
      <th id="f_name">First Name</th> 
 
      <th id="l_name">Last Name</th> 
 
      <th id="age">Age</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody id="results"> 
 
     <!-- this will be auto-populated --> 
 
    </tbody> 
 
</table>

Answer 2

你需要的是有一個順序的對象。這可能是Array或Map。

然後您需要考慮您的數據模式（即從服務器發出的JSON數據的形狀）。我可能會將ID移動到對象本身中（替代方法是使其隱含，這很脆弱且容易出錯）。

[ 
    { 
    "id": 1, 
    "name": "Fred", 
    ... 
    } 
] 

在這一點上，它只是一個排序問題。

Array有一個sort function on the prototype。

注意如果需要執行轉換到的陣列，可以使用Array.from：

var obj = { 
 
    1: { name: "Mike", surname: "Smith" }, 
 
    2: { name: "Albert", surname: "Einstein" }, 
 
    3: { name: "Steve", surname: "Jobs" }, 
 
    length: 4 // largest *zero-based* index 
 
}; 
 

 
console.log(Array.from(obj));

所得陣列將是稀疏的（有間隙），那麼你將需要篩選結果以消除它們：

Array.from(obj).filter(populated); 

function populated(v) { 
    return !!v; 
}