使用AngularJS ng-repeat遍历嵌套JSON构建数据表格的实现问题

解决方案 #

核心思路 #

你要实现的是行对应Web服务，列对应日期，单元格输出对应服务在对应日期的数值，可以利用数组索引对齐的特性完成绑定，不需要单独拆分resultsJx、listnqJx到独立scope变量。

第一步：修正JS数据定义的笔误 #

你原来的代码里定义数组用的变量名是table，后续赋值给self.tableau的时候变量名写错了，先修正：

// 原来的变量名table改为tableau
const tableau = [
  { day: "Day1" , webservices : [
    {ws: resultsJ1, tnq : listnqJ1 }
  ]},
  { day: "Day2", webservices : [
    {ws :resultsJ2, tnq : listnqJ2 }
  ]},
  { day: "Day3" , webservices : [
    {ws :resultsJ3, tnq : listnqJ3 }
  ]}
]
self.tableau = tableau
// 不需要再单独给$scope挂载resultsJ1、listnqJ1这类变量

第二步：修正HTML表格结构 #

你原来的代码存在td嵌套td的语法错误，同时重复写了resultsJ1、resultsJ2的循环，优化后代码如下：

<table cellpadding="20" rules="GROUPS" frame="BOX">
  <thead>
    <tr>
      <th>Web Service</th>
      <th style="width: 100px" ng-repeat="day in ctrl.tableau">
        {{day.day}} <!-- 你原来写的day.jour和数据字段不匹配，改为day.day -->
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- 按服务数量循环生成行，$index对应当前是第几个服务 -->
    <tr class="xl153" ng-repeat="ws in ctrl.tableau[0].webservices[0].ws track by $index">
      <!-- 第一列输出服务名 -->
      <td>{{ws}}</td>
      <!-- 循环每一天，输出当前服务在当天的tnq值 -->
      <td style="width: 100px" class="xl153" ng-repeat="day in ctrl.tableau">
        {{day.webservices[0].tnq[$index]}}
      </td>
    </tr>
  </tbody>
</table>

注意事项 #

如果不同日期的Web服务数量不一致，建议提前统一数据长度，补全缺失的服务和对应数值，避免索引错位导致展示异常。

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