如何在AngularJS中按值对REST API返回的字典排序？

这个问题其实是JavaScript对象的特性导致的——JavaScript对象的属性并不保证会保持原有的插入顺序，尤其是当属性名是字符串类型时，浏览器会自动按键的字典序重新排列它们。这就是为什么后端返回的是按值排序的字典，但到了AngularJS里就变成按键排序的原因，哪怕后端已经处理好顺序，对象的特性也会打乱它。

要解决这个问题，核心思路是把无序的对象转换成有序的数组，再对数组按值排序，最后绑定到select元素上。具体步骤如下：

1. 在Controller中转换并排序数据 #

假设你的HTTP请求返回的对象存在localeObj变量里，我们可以把它转换成包含key和value的数组，然后按value字段排序：

方法一（现代浏览器/支持ES6+） #

// 从后端获取到的按值排序的字典对象
const localeObj = { "en-uk": "English UK", "en-us": "English USA", ... };

// 转换为数组并按value排序
$scope.locales = Object.entries(localeObj)
  .map(([key, value]) => ({ key, value }))
  .sort((a, b) => a.value.localeCompare(b.value));

方法二（兼容旧浏览器/AngularJS低版本） #

如果你的环境不支持Object.entries，可以用Object.keys来遍历：

$scope.locales = Object.keys(localeObj)
  .map(key => ({ key: key, value: localeObj[key] }))
  .sort((a, b) => a.value.localeCompare(b.value));

2. 在模板中绑定数组 #

转换完成后，就可以把数组绑定到select元素上，有两种常用方式：

使用ng-repeat #

<select ng-model="selectedLocale">
  <option ng-repeat="locale in locales" value="{{locale.key}}">{{locale.value}}</option>
</select>

使用ng-options（更推荐的AngularJS方式） #

<select ng-model="selectedLocale" ng-options="locale.key as locale.value for locale in locales"></select>

这样处理后，select的选项就会严格按照value的字母顺序排列，和后端返回的排序一致了。

另外提一句，如果可以协调后端直接返回有序数组而不是对象，那前端就不需要额外处理，但如果后端没法修改，上面的前端处理方案是最稳妥的。

内容的提问来源于stack exchange，提问作者CodeClimber