Angularjs 和显示嵌套的 Json 数组答案

【问题标题】：Angularjs and Displaying Nested Json ArraysAngularjs 和显示嵌套的 Json 数组
【发布时间】：2015-07-28 22:56:04
【问题描述】：

angularjs 新手并寻求一些建议。我们已将 Angular 前端连接到一个 REST API，该 API 会返回 json，例如：

[  
   {  
      "category_id":"1",
      "category_name":"dog",
      "subcategories":[  
         {  
            "category_id":"4",
            "parent_id":"1",
            "category_name":"Sporting",
         },
         {  
            "category_id":"5",
            "parent_id":"1",
            "category_name":"Hunter",
         },
         {  
            "category_id":"6",
            "parent_id":"1",
            "category_name":"Lap",
         }
      ]
   },
   {  
      "category_id":"2",
      "category_name":"feline",
      "subcategories":[  
         {  
            "category_id":"8",
            "parent_id":"2",
            "category_name":"Black",
         },
         {  
            "category_id":"9",
            "parent_id":"2",
            "category_name":"White",
         },
         {  
            "category_id":"10",
            "parent_id":"2",
            "category_name":"Domestic",
         }
      ]
   }
]

我们正在尝试将每个类别及其子类别显示为表格中的行。我们一直在尝试使用 ng-repeat - 但在使用表时它肯定不喜欢嵌套数组。

我们一起破解了类似的东西：

<tr ng-repeat-start="cat in category"> 
    <td>{{cat.category_id}}</td>
    <td>{{cat.category_name}}</td>
</tr>
<tr ng-repeat-start="subcat in cat.subcategories">
    <td>{{subcat.category_id}}</td>
    <td>{{subcat.category_name}}</td>
</tr>
<tr ng-repeat-end></tr>
<tr ng-repeat-end></tr>

我们希望能够为我们的表格使用数据表 (angular-datatables.min.js) 功能，这意味着我们需要扁平化我们的 json，以便子类别与类别处于同一“级别”并且都在一个数组而不是子数组中。

有谁知道实现此目的的“好”方法？

提前感谢您的帮助。

【问题讨论】：

在客户端展平树有什么问题？典型的数据大小是多少？

标签： arrays json angularjs

【解决方案1】：

这是您要寻找的结果吗？

http://plnkr.co/edit/5HN8I5KlT7X73qtjG44B?p=preview

<table border="1">
    <tr ng-repeat="animal in animals"> 
      <td>{{animal.category_id}}</td>
      <td>{{animal.category_name}}</td>
      <td>
        <table>
        <tr ng-repeat="subcat in animal.subcategories">
         <td>{{subcat.category_id}}</td>
         <td>{{subcat.category_name}}</td>
        </tr>
        </table>
      </td>
    </tr>
</table>

【讨论】：

寻找更多类似以下的内容：
{{animal.category_id}} td> {{animal.category_name}}
必须是一个“数组”才能使用数据表
你能举例说明决赛桌应该是什么样子吗？现在忘记 Angular，只是一个简单的带有硬编码值的表，看看你想要实现什么。

【解决方案2】：

使用Array.prototype.reduce()。

var res= data.reduce(function(p, c, i){
    // push new parent object into array
    p.push({category_id : c.category_id, category_name : c.category_name}) ; 

    // concat subcategories with previous array       
    return p.concat(c.subcategories);

},[]);

如果每个项目的结构相当大，可以将内部的push()替换为：

    var cat = angular.copy(c);
    delete cat.subcategories;
    p.push(cat);

DEMO

【讨论】：