Angular处理可变字段JSON：筛选带银行账户数据并统计

我来帮你解决这个问题！你遇到的是JSON响应字段不一致的场景，需要筛选出包含bankAccount的记录渲染表格，同时统计总记录数和符合条件的数量，用Angular可以很轻松实现，具体步骤如下：

1. 先处理数据筛选 #

首先把接口返回的所有数据存起来，然后用数组的filter方法筛选出符合条件的记录——也就是account对象下存在bankAccount的条目。在你的Angular控制器里这么写：

// 假设接口返回的原始数据是data
$scope.allAccounts = data; // 保存所有记录，用来算总数
// 筛选出带有bankAccount的记录
$scope.filteredAccounts = $scope.allAccounts.filter(function(item) {
  // 先判断account存在，再检查bankAccount，避免空指针报错
  return item.account && item.account.bankAccount;
});

2. 统计数量超简单 #

有了上面的两个数组，统计就直接取长度就行：

$scope.totalRecords = $scope.allAccounts.length; // 总记录数
$scope.hasBankAccountCount = $scope.filteredAccounts.length; // 含银行账户的记录数

3. 表格渲染 #

接下来在HTML里用ng-repeat遍历筛选后的数组，就能只渲染符合条件的记录了，同时可以把统计数据展示出来：

<!-- 先展示统计信息 -->
<div class="stats">
  总记录数：{{totalRecords}} | 含银行账户的记录数：{{hasBankAccountCount}}
</div>

<!-- 表格部分 -->
<table border="1">
  <thead>
    <tr>
      <th>账户类型</th>
      <th>银行账户名称</th>
      <th>银行账号</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="acc in filteredAccounts">
      <td>{{acc.account.accountType}}</td>
      <td>{{acc.account.bankAccount.bankAccountName}}</td>
      <td>{{acc.account.bankAccount.bankAccountNumber}}</td>
    </tr>
  </tbody>
</table>

小技巧优化 #

如果你的Angular项目支持ES6语法，还可以用箭头函数+可选链简化筛选逻辑，代码更简洁：

$scope.filteredAccounts = $scope.allAccounts.filter(item => item.account?.bankAccount);

可选链?.会自动判断前面的对象是否存在，避免空指针异常，不过要确保你的运行环境支持这个语法哦。

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