如何使用ng-repeat访问嵌套JSON数据构建表格

问题根源 #

• 你的HTML存在语法错误：<td> 标签不允许嵌套另一个 <td>，不符合DOM结构规范，会直接导致渲染异常
• 你没有利用已经定义好的嵌套数据集ctrl.tableau，硬编码绑定单个日期的变量，扩展和维护性都很差

修正后的JS代码 #

先修正你原来变量名不一致的问题（你一开始定义数组用的变量名是table，后面赋值用的是tableau，需要统一）：

// 先定义你自己的结果和查询列表（这里用示例值演示，替换成你自己的实际数据即可）
const resultsJ1 = ['服务1', '服务2', '服务3'];
const listnqJ1 = [12, 45, 78];
const resultsJ2 = ['服务1', '服务2', '服务3'];
const listnqJ2 = [23, 56, 89];
const resultsJ3 = ['服务1', '服务2', '服务3'];
const listnqJ3 = [34, 67, 90];

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;

修正后的HTML代码 #

直接利用嵌套ng-repeat结合行索引$index匹配对应数据：

<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}}
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- 按第一个天的ws列表遍历行，保证所有天的ws列表长度一致即可正常匹配 -->
    <tr style="width: 100px" class="xl153" ng-repeat="ws in ctrl.tableau[0].webservices[0].ws track by $index">
      <!-- 第一列显示服务名 -->
      <td>{{ws}}</td>
      <!-- 遍历每天生成列，用当前行的$index取对应天的tnq值 -->
      <td style="width: 100px" class="xl153" ng-repeat="day in ctrl.tableau track by $index">
        {{day.webservices[0].tnq[$parent.$index]}}
      </td>
    </tr>
  </tbody>
</table>

逻辑说明 #

• 外层ng-repeat遍历服务列表生成每一行，$index表示当前是第几个服务
• 内层ng-repeat遍历每天生成列，用$parent.$index获取外层行的索引，就能精准取到当前服务在对应天的tnq数值
• 不需要单独为每一天声明$scope变量，直接用已有的嵌套结构即可，后续新增天数只要在tableau数组里加对应元素就行，不用修改HTML逻辑

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