up vote 0 down vote favorite
1

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.

share|improve this question
    
What's the problem flattening the tree on client side? What's the typical data size? – Kirill Slatin Jul 28 '15 at 23:07
up vote 0 down vote

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>
share|improve this answer
    
Looking for more like the following: <table datatable="ng"> <tbody> <tr ng-repeat="animal in category" > <td>{{animal.category_id}}</td> <td>{{animal.category_name}}</td> </tr> </tbody> </table> It has to be one 'array' to be able to use datatable – Curt Cranfield Jul 29 '15 at 1:22
    
Can you show an example of what the final table should look like? Forget Angular for now, just a plain and simple table with hardcoded values, to see what you're trying to achieve. – murid Jul 29 '15 at 13:42
    
Like this perhaps? plnkr.co/edit/dJLF8jxNY3kMzR91Gcti?p=preview – murid Jul 29 '15 at 14:02
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.