如何将数组拆分为表格答案

【问题标题】：how to split array into table如何将数组拆分为表格
【发布时间】：2021-11-24 11:54:08
【问题描述】：

我的 JSON 文件中有这个数组

"Works": [
{"TypeOfWork": "scaffolding", "Status": "done"},
{"TypeOfWork": "painting", "Status": "on-going"}
]

我想展示一张这样的表格

Works	Status
type of work 1	Status 1
type of work 2	Status 2

我试过了

<table ng-repeat = 'projectDetails.Works'>
<th> Works </th>
<th> Status </th>
<td> {{Works.TypeOfWorks}}</td>
<td> {{Works.Status}}</td>
</table>

我也试过这个，但形式是 {{projectDetails.Works(TypeOfWork)}} 和 {{projectDetails.Works[TypeOfWorks]}}

<table>
    <th> Works </th>
    <th> Status </th>
    <td> {{projectDetails.Works.TypeOfWorks}}</td>
    <td> {{projectDetails.Works.Status}}</td>
    </table>

我从 GET 函数获取数据

$scope.projectList = [];
for (var id = 0; id < 20; id++) {
  var targetURL = 'https://happybuildings.sim.vuw.ac.nz/api/sooleandr/project.'+id+'.json';
  $http.get(targetURL).then(
    function successCall(response){
      $scope.projectList.push(response.data);
    }
  );
}

$scope.showData = function(x){
 $scope.projectDetails = x;
 };

在我的 HTML 中，我从 projectList 创建了按钮并执行了 ng-repeat 'x in projectList'。当点击这些按钮时，它会调用 showData() 函数，该函数会显示相关数据。

【问题讨论】：

我怀疑HTML5表格可以不用tr标签设计

标签： html arrays angularjs html-table

【解决方案1】：

试试：

<table>
  <thead>
    <tr>
      <th>Works</th>
      <th>Status</th>
     </tr>
  </thead>
  <tbody>
    <tr ng-repeat = 'work in projectDetails.Works track by work.TypeOfWorks'>
      <td>{{work.TypeOfWorks}}</td>
      <td>{{work.Status}}</td>
    </tr>
  </tbody>
</table>

您需要将您的ng-repeat 放在tr 内的tbody 上，即遍历数据集并为每个数据集创建一个表格行。

【讨论】：