如何从以下分层 Json 生成 HTML 表格？答案

【问题标题】：How to generate an HTML table from the following Hierachical Json?如何从以下分层 Json 生成 HTML 表格？
【发布时间】：2015-12-17 17:51:17
【问题描述】：

我有这样的JSON，你可以在plunker找到完整的JSON

"name": "TOTAL",
            "imageURL": "",
            "type": "Total",
            "children": [
                {
                    "name": "MOTOR CAR",
                    "imageURL": "",
                    "type": "MOTOR CAR",
                    "children": [
                        {
                            "name": "Private",
                            "imageURL": "",
                            "type": "Private",
                            "size": 9221
                        },
                        {
                            "imageURL": "",
                            "type": "Hiring",
                            "name": "Hiring",
                            "size": 1058
                        },
                        {
                            "imageURL": "",
                            "type": "Rent",
                            "name": "Rent",
                            "size": 114
                        }
                    ],
                    "size": 10393
                },
                {
                    "name": "COMBINE HARVESTER",
                    "imageURL": "",
                    "type": "COMBINE HARVESTER",
                    "children": [
                        {
                            "imageURL": "",
                            "type": "Agricultural Usage",
                            "name": "Agricultural Usage",
                            "size": 1
                        }
                    ],
                    "size": 1
                }
      }

从上面我需要生成如下表，我该怎么做？这是我到目前为止尝试过的代码：

   <table>
        <tr ng-repeat='(key,val) in arr'>
            <td>
                {{key}} 
            </td>
            <td ng-repeat='(nestedKey,nestedVal) in val'>  
                {{nestedVal}}
            </td>
        </tr>
    </table>

预期输出：

【问题讨论】：

你的 Plunkr 指向别的东西。里面没有json。
@brute_force 对不起，请检查更新
你在处理数组还是对象？在上面的示例和您的 plunker 中，您的 json 结构非常不同。
@o4ohel 是的，不一样，我只在这里发布了第一个对象，这就是它看起来不同的原因
嘿结帐这个问题stackoverflow.com/questions/18357370/…也许这可以帮助你

标签： angularjs json html-table hierarchical-data

【解决方案1】：

更正：

<tr ng-repeat='(key,val) in arr.children'>
            <td>
                {{key}} 
            </td>
            <td>
                {{val.name}} 
            </td>
           <td> 
             <div ng-repeat='(nestedKey,nestedVal) in val.children'>
               {{nestedVal.name}}
               </div>
            <td>
                {{val.size}} 
            </td>

        </tr>

http://plnkr.co/edit/h4wxF7XS5Dk1kdQuyxLV?p=preview

【讨论】：

您的 ng-repeat 没有任何问题。只是您错误地遍历了json。我会推荐使用jsonviewer.stack.hu 来可视化你的json。
虽然没有呈现预期的输出

【解决方案2】：

HTML：

<div ng-controller="MyController">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Vehicle Type</th>
        <th>Vehicle Usage</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody ng-repeat="group in arr.children">
      <tr ng-repeat="item in group.children">
        <td>{{$parent.$index+1}}_{{$index+1}}</td>
        <td>{{group.type}}</td>
        <td>{{item.type}}</td>
        <td>{{item.size}}</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：