How to access nested json object with nested ng-repeat in AngularJs

AngularJs access complex nested JSON object: Here in this article we learn how to display all the nested JSON data using nested ng-repeat directive into our HTML table on a button click .i.e how to bind an array of objects using ng-repeat in Angularjs with an example. In my previous article have also explained how to bind JSON data to HTML table using ng-repeat directive.

Here we learn more about Angularjs nested JSON where we have JSON array object which further contains array objects. .i.e array of array. So to display JSON data we use the nested ng-repeat directive in our Angularjs example.

About ng-repeat:

In AngularJs the ng-repeat directive is used to loop through items in the collection of an element (DOM). The ng-repeat directive allows to iterate over a collection of data and print out DOM nodes that respond to that data. .i.e is similar to for loop.

Now, this is the main part of this article where we are going to use nested ng-repeat with complex data. The reason for using nested ng-repeat is because complex JSON comprises of JSON object array and each object of the JSON array consist of another child JSON object array. So having one ng-repeat inside another ng-repeat directive makes a parent child ng-repeat directive hierarchy.

Here first we add a button and HTML Table. Now on button tag, we applied ng-click directive ( ng-click directive is used to assign click events ), which calls fillTableData() function of the controller.

We used ng-repeat directive on Table Row tr which display Actor Name, DOB (act as the parent). On the last TD (cell) we added UL list, with nested ng-repeat (act as child data), by this we able to display actors filmography detail list. By this we able to display complete JSON data into our Table.

Conclusion: Here at the end of this article we learn how to display nested JSON array data into HTML table. We use the nested ng-repeat directive to show complex JSON data in AngularJs with an example.