Want a free Ebook & latest Update Subscribe Now
  [email protected]      beta
Donate

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.

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:
Bind nested json data to table using nested ng-repeat in AngularJs

 


# SetUp: Download and import AngularJs Library

You can download AngularJS files from angularjs.org, or you can use Google hosted files. After importing 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'}]
                }];
      };  

    }]);
Try It Yourself ⇒

# 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 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.

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>
Try It Yourself ⇒

 

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.

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

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!

Share:    
Satinder Singh

Hi all, am Founder and Author of Codepedia.info, also atypical polyglot programmer from Bombay, India. I have a passion to create, solve, and deploy software applications.
       ForEach ( minute in MyLife ) { myExperience++ ; }



Post Comment


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