Angularjs и отображение вложенных массивов Json

Question

Angularjs и отображение вложенных массивов Json

0

Новый для angularjs и ищет некоторые советы. Мы подключили наш угловой интерфейс к REST 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>

То, что мы хотели бы сделать, это использовать функции datatable (угловые-datatables.min.js) для наших таблиц, что означает, что нам нужно сгладить наш наш json, чтобы подкатегории находились на одном уровне с категориями и все в одном массиве вместо подмассивов.

Кто-нибудь знает "хороший" способ достичь этого?

Спасибо заранее за любую помощь.

Curt Cranfield 29 июль 2015, в 01:35

Источник

0

В чем проблема сглаживания дерева на стороне клиента? Какой типичный размер данных?
Kirill Slatin 28 июль 2015, в 23:07

Теги:

angularjs

arrays

json

2 ответа

Ещё вопросы

В чем проблема сглаживания дерева на стороне клиента? Какой типичный размер данных?

trs · Answer 1 · 2015-07-28T22-18-00.000Z

Это результат, который вы ищете?

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>

Ищите больше похожего на следующее: <table datatable = "ng"> <tbody> <tr ng-repeat = "animal in category"> <td> {{animal.category_id}} </ td> <td> {{animal .category_name}} </ td> </ tr> </ tbody> </ table> Это должен быть один «массив», чтобы можно было использовать datatable
Можете ли вы показать пример того, как должен выглядеть финальный стол? Забудьте сейчас об Angular, просто простой и простой таблице с жестко закодированными значениями, чтобы увидеть, чего вы пытаетесь достичь.
Как это возможно? plnkr.co/edit/dJLF8jxNY3kMzR91Gcti?p=preview

charlietfl · Answer 2 · 2015-07-28T20-52-00.000Z

Использование 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