Angularjs and Displaying Nested Json Arrays

Question

New to angularjs and looking for some advice. We have hooked our angular front-end to a REST API that is spitting json back such as:

[ { "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", } ] } ] 

We are trying display each category and their sub-categories as rows in a table. We have been trying to us ng-repeat - but it definately doesn't like nested arrays when using tables.

We have hacked something like this together:

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

What we would like to be able to do is use datatable (angular-datatables.min.js) functionality for our tables which means that we need to flatten our our json such that subcategories are on the same "level" as categories and are all in one array instead of subarrays.

Does anyone know of a 'nice' way to accomplish this?

Thanks in advance for any assistance.

Answer 1

Is this the result you're looking for?

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> 

Answer 2

Using 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); },[]); 

If structure of each item is considerably larger can replace the inner push() with:

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

DEMO