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

/ / 0 Comments

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.

Steps to bind nested JSON object using nested ng-repeat

  1.  Setup: Download and import AngularJs Library
  2. Create nested JSON Object (which bind to Table/ UL li / Div)
  3. HTML Markup: Add HTML table and button ( apply nested ng-repeat directive )
Output:  

# SetUp: Download and import AngularJs Library

You can download AngularJS files from angularjs.org, or you can use Google-hosted files. After importing the Angularjs file, add Directive ng-app & ng-controller to the body tag.
So now our HTML markup looks like as shown below
<html>
<head>
<script src="angularjs/angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="myapp" ng-controller="tableController">

</body>
<html>

# Create nested JSON Object (which bind to Table/ UL li / Div)

Here we have function fillTableData() which has variable Actor ( actor information). This Actor variable holds an array of complex JSON objects .i.e (Actor JSON Data ) which is used to populate (bind) HTML Table using the AngularJS nested ng-repeat directive.
Our Code looks like as written below.

    var app = angular.module("myapp", []);
    app.controller("tableController", ['$scope', function($scope) {

      $scope.fillTableData=function(){
          $scope.Actor = [{
              Name: 'Robert Downey',
              Born : 'April 4, 1965',
              filmography: [ {name: 'Iron Man 2',year : '2010' }, 
                             {name: 'Iron Man 3', year : '2013'  }, 
                             {name: 'Avengers: Age of Ultron',year : '2015'}, 
                             {name: 'Captain America: Civil War',year : '2016'}]
              },{
              Name: 'Vin Diesel',
              Born : 'July 18, 1967',
              filmography: [ {name: 'Fast & Furious',year : '2009'},
                             {name: 'Fast Five',year : '2011'}, 
                             {name: 'Riddick',year : '2013'}, 
                             {name: 'Furious 7',year : '2015'}]
              },{
              Name: 'Sylvester Stallone',
              Born : 'July 6, 1946',
              filmography: [ {name: 'Rocky II',year : '1979'}, 
                             {name: 'Rocky III',year : '1982'}, 
                             {name: 'Rambo III',year : '1988'}, 
                             {name: 'Escape Plan',year : '2013'}]
                }];
      };  

    }]);
View Demo 

# HTML Markup: Add HTML table and button ( apply nested ng-repeat directive )

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 consists 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 the button tag, we applied the ng-click directive ( ng-click directive is used to assign click events ), which calls fillTableData() function of the controller.

We used the ng-repeat directive on Table Row tr which displays Actor Name, DOB (act as the parent). On the last TD (cell) we added the 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.

The final code looks like as written below:
<table id="myTable" class="table table-stripe" >
  <tr> <th>Srno</th> <th>Name</th> <th>DOB</th><th>Films</th></tr>
 
  <tr ng-repeat="a in Actor">
      <td>{{ $index+1 }}</td>
      <td>{{ a.Name }}</td>
      <td>{{ a.Born }}</td>
      <td>
         <ul>
           <li ng-repeat="f in a.filmography">{{f.name}} -({{f.year}}) </li>
         </ul>
      </td>
  </tr>
 </table>
 View Demo

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

You must also like this:

  1. How to Bind JSON data to HTML Table [AngularJs]
  2. How to Delete Table Row tr on button click in AngularJS
  3. How to create serial number using ng-repeat in AngularJS
Other Reference

  1. codeproject.com
  2. c-sharpcorner.com
  3. docs.angularjs.org

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

Your email address will not be published. Required fields are marked *

0 Comments