CODEWITHSUNDEEP
arraysjsonangularjs
Curt Cranfield
Curt Cranfield

Reputation: 1

Angularjs and Displaying Nested Json Arrays

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.

Upvotes: 0

Views: 1384

Answers (2)

charlietfl
charlietfl

Reputation: 171679

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

Upvotes: 0

trs
trs

Reputation: 863

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>

Upvotes: 1

Related Questions