AngularJS中转换JSON特定字段类型以实现smart-table排序

这问题太常见了——API返回的数字（比如价格、排名、涨跌幅）经常以字符串形式存在，smart-table默认按字符串排序肯定会乱（比如"10"会排在"2"前面），我给你几个实用的解决办法：

方法一：获取数据后手动转换字段类型（推荐） #

最直接的方式就是在拿到API返回的数据后，把需要排序的字段转换成数字类型。这样后续不管是排序还是做其他数值计算都更省心。

举个AngularJS里的例子，假设你用$http请求数据：

$http.get('your-crypto-api-url')
  .then(function(response) {
    // 拿到原始数据
    let cryptoList = response.data;
    
    // 遍历每条数据，转换指定字段
    cryptoList.forEach(item => {
      // 转换纯数字字段（排名、价格、市值等）
      item.rank = Number(item.rank);
      item.price = Number(item.price);
      item.marketCap = Number(item.marketCap);
      
      // 转换带%的涨跌幅：先去掉%符号再转数字
      item.change24h = Number(item.change24h.replace('%', ''));
    });
    
    // 把处理好的数据赋值给smart-table绑定的变量
    $scope.displayedCollection = [].concat(cryptoList);
  });

处理完之后，smart-table就能识别这些是数字类型，排序就会正常工作了。

方法二：给smart-table自定义排序函数 #

如果不想修改原始数据（比如需要保留字符串格式的显示），可以给smart-table的列指定自定义排序逻辑，在排序时临时转换类型。

首先在HTML的表格里，给需要自定义排序的列加上st-sort-function属性：

<table st-table="displayedCollection" st-safe-src="cryptoList">
  <thead>
    <tr>
      <th st-sort="rank" st-sort-function="numericSort">排名</th>
      <th st-sort="price" st-sort-function="numericSort">价格</th>
      <th st-sort="change24h" st-sort-function="percentageSort">24h涨跌幅</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="crypto in displayedCollection">
      <td>{{crypto.rank}}</td>
      <td>{{crypto.price | currency}}</td>
      <td>{{crypto.change24h}}</td>
    </tr>
  </tbody>
</table>

然后在控制器里定义对应的排序函数：

// 纯数字字符串的排序函数
$scope.numericSort = function(a, b) {
  const numA = Number(a);
  const numB = Number(b);
  return numA - numB;
};

// 带%的涨跌幅排序函数
$scope.percentageSort = function(a, b) {
  const numA = Number(a.replace('%', ''));
  const numB = Number(b.replace('%', ''));
  return numA - numB;
};

这样每次排序时，smart-table会调用你定义的函数，先把字符串转成数字再比较。

小提示 #

• 转换的时候注意处理可能的异常：如果API返回的字段是空或者非数字字符串，Number()会返回NaN，可以加个判断，比如item.price = !isNaN(Number(item.price)) ? Number(item.price) : 0;
• 如果你用的是$resource而不是$http，可以在transformResponse里统一处理字段转换，这样所有请求回来的数据都会自动转类型。

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