通过嵌套属性的值排序对象属性

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