时间戳

首页 > 解决方案 > AngularJS - 来自动态生成的 JSON 的表，具有各种键名

html - AngularJS - 来自动态生成的 JSON 的表，具有各种键名

问题描述

我正在尝试从动态生成的 JSON 创建一个表。例如 JSON 可能如下所示：

[{"date": "10-10-2010", "Cost":"10", "Column3": 20} ...]

但它也可以是这样的：

[{"date": "10-10-2010", "Column1":"ex", "Column2": 1, "Column4": "text"} ...]

我希望列的标题是 JSON 键的名称，而行单元格是这些键的值。有什么简单的方法可以实现这一目标吗？

标签： htmlangularjsjsondynamic

解决方案

For header you need to get first row of json data like this: 

<thead>
   <tr>
     <th ng-repeat="(header, value) in jsonData[0]">
       {{header}}
     </th>
    </tr>
</thead>

Afterward you should iterate tbody like this: 

 <tbody>
    <tr ng-repeat="rowData in jsonData">
      <td ng-repeat="cellData in rowData">
        {{cellData}}
      </td>
    </tr>
 </tbody>

This is easiest way to bind dynamic html table.

Hope this will work for you!!

推荐阅读