AngularJS如何将JSON接口返回的数组数据渲染为HTML表格

错误原因梳理 #

• ng-repeat用法错误：你需要循环的是数组里的每一行数据，应该绑定到<tr>标签上，而不是整个，同时ng-repeat的语法必须是变量 in 数组
• 字段名拼写错误：JSON中的字段名是TypeOfWork，你写成了TypeOfWorks多了一个s，导致取不到值
• 表格结构不规范：

需要包裹在
需要包裹在

的格式的里，的里，不能直接放在下
• 访问数组元素方式错误：projectDetails.Works是数组，不能直接用.访问内部对象的属性，必须先取出数组里的单个元素再访问属性

正确实现代码 #

<table class="s-table">
  <thead>
    <tr>
      <th>Works</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <!-- 循环Works数组的每一项生成行 -->
    <tr ng-repeat="work in projectDetails.Works">
      <td>{{work.TypeOfWork}}</td>
      <td>{{work.Status}}</td>
    </tr>
  </tbody>
</table>

补充优化建议 #

可以加个判断，避免数据没加载完成、或者选中的项目没有Works字段时显示异常：

<div ng-if="projectDetails && projectDetails.Works && projectDetails.Works.length">
  <!-- 上述表格代码放在该容器内即可 -->
</div>

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