如何从以下 Hierachical Json 生成 HTML table？

Question

我有这样的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，我该怎么做？这是我到目前为止尝试过的代码：

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

预期输出：

Answer 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

Answer 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>

如何从以下 Hierachical Json 生成 HTML table？

How to generate an HTML table from the following Hierachical Json?

angularjs

json

html-table

hierarchical-data