Home » Featured, Headline, Software Development

Displaying hierarchical objects linearly in AngularJS using ng-repeat

3 June 2015 One Comment

Very often we come across data objects that have parent-child-grandchild relationship in hierarchical structure.Displaying this in hierarchy is usually easy but the problem exists when one has to display it in linear or flat structure.

Assume we have a data set as parent->child->grandChild and we plan to display this in table linearly. AngularJS’ built in directive ng-repeat makes it quite easy to iterate and output the object attributes. It produces the linear output as below in tabular form.

ng-repeat-output

The below snippet shows ng-repeat with other attributes as ng-repeat-start and ng-repeat-end. Download this code from github to see how it works.

  <table>
    <tr class="dark-grey">
	<th>Name</th>
	<th>Size</th>
    </tr>
    <tr ng-repeat-start="parent in results.children" class="grey"> <!-- repeating parent -->
	<td>- {{ parent.name }}</td>
	<td>{{ parent.size }}</td>
    </tr>
    <tr ng-repeat-start="child in parent.children" class="light-blue"> <!-- repeating child -->
	<td>-- {{ child.name }}</td>
	<td>{{ child.size }}</td>
    </tr>

    <tr ng-repeat-end ng-repeat-start="grandChild in child.children" class="light-green"> <!-- repeating grandchild -->
	<td>--- {{ grandChild.name }}</td>
	<td>{{ grandChild.size }}</td>
    </tr>
    <tr ng-repeat-end></tr> 
    <tr ng-repeat-end></tr> 
 </table>	  

One Comment »

  • Anonymous said:

    I read this article completely concerning the resemblance of latest and earlier technologies, it’s remarkable article.

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image