javascript - 将 js Controller 的 json 响应显示到 html 表中

Question

我正在使用 AngularJS 开发一个 Spring 应用程序。我收到了 JS Controller 的响应。我想在页面上以表格形式显示。

devDebtTable是可以从JS Controller 访问页面的对象。

我使用 {{devDebtTable}} 在页面上打印的 JS Controller 的响应(模拟数据)是我想要放入表中的内容:

 {"headers":["John","Larry","Steve"],"rows":[["Project1","14 Days","2 Days","1 Day"],["Project2","10 Days","4 Days",""],["Project3","","2 Days","10 Days"]]}

我希望它的格式如下:

             Dev 1    Dev 2   Dev 3     Dev 4
Project 1   5 Days    2 Days  2 Days    1 Day
Project 2   5 Days    7 Days  2 Days
Project 3   3 Days   14 Days  12 Days   
Project 4   12 Days  14 Days  5 Days
Project 5   33 Days  53 Days  23 Days

这是我迄今为止尝试过的，但不正确。

<div class="container">
    <table class="table table-bordered">
        <thead>
        <tr ng-repeat="data in devDebtTable">
            <th scope="colgroup"></th>
            <th scope="colgroup" ng-repeat="headers in data">{{headers}}</th>
        </tr>
        </thead>
        <tr ng-repeat="row in devDebtTable.row">
            <td>item:{{row}}</td>
            <!--<td ng-repeat="item in row">item:{{item}}</td>-->
        </tr>
    </table>
</div>

昨天我花了 8 个小时尝试不同的事情。我该怎么做才能将该 JSON 响应放入页面上的表格中？

Answer 1

代码中存在一系列错误。请将代码更新为以下内容并尝试

• 删除 ng-repeat="data in devDebtTable"
• 将 header ng-repeat 更新为 ng-repeat="headers in data.headers"
• 将数据 ng-repeat 更新为 ng-repeat="row in devDebtTable.rows"
• 删除 <td>item:{{row}}</td>

• 取消注释 <td ng-repeat="item in row">item:{{item}}</td>并删除文本项:

  <table class="table table-bordered">
     <thead>
        <tr>
           <th scope="colgroup"></th>
           <th scope="colgroup" ng-repeat="headers in data.headers">{{headers}}</th>
        </tr>
     </thead>
     <tr ng-repeat="row in devDebtTable.rows">
        <td ng-repeat="item in row">{{item}}</td>
     </tr>
  </table>