AngularJS: Bind JSON data to HTML Table [ng-repeat]

Display JSON data in HTML table using Angularjs: Here in this article will explain how to bind JSON data to HTML table in Angular js. I am making this article very simple, i.e., we have a variable which holds JSON data, and on page load, we bind that JSON data to create dynamic HTML Table in AngularJs.

In the further article, we see how to add create dynamic HTML Table with Ajax call ( JSON data) in AngularJS. Let’s head toward the article, and now here we use AngularJs ng-repeat directive for data-binding to HTML table.

What is ng-repeat in Angularjs?

In AngularJs the ng-repeat directive is used to loop through items in collection element. Basically, it repeats a set of HTML, a given number of times i.e similar to for loop.

Steps to populate (bind) HTML table with JSON data using ng-repeat.

  1. SetUp: Download and import AngularJs Library
  2. Create JSON Data (which bind to Table).
  3. HTML Markup: Add HTML table ( apply ng-repeat directive)

 

Output:

Use ng-repeat to bind json data to table in angularjs


# SetUp: Download and import angularjs Lib.

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 JSON Data (which bind to our HTML Table).

Here we have variable employees which hold an array of JSON objects .i.e (Employee JSON Data ), which is used to populate (bind) HTML Table using the AngularJS ng-repeat directive.

Our Code looks like as written below.

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

$scope.employees = [
             { 'Name': 'Satinder Singh', 'Gender': 'Male', 'City': 'Bombay' },
             { 'Name': 'Leslie Mac', 'Gender': 'Female', 'City': 'Queensland' },
             { 'Name': 'Andrea ely ', 'Gender': 'Female', 'City': 'Rio' },
             { 'Name': 'Amit Sarna', 'Gender': 'Male', 'City': 'Navi Mumbai' },
             { 'Name': 'David Miller', 'Gender': 'Male', 'City': 'Scouthe'}
           ];
}]); 

Also Read: How to Delete Table Row on button click in AngularJs


# Markup: Add HTML table (bind data by using ng-repeat directive)

We are done with JSON data and already import AngularJS Lib and now we add HTML table and apply ng-repeat directive which populates the table with given JSON data.

Here in our case, we are going to display employee details i.e employee name, gender, city and to display data we use curly braces {{ }}. Our final code looks like as written below.

<body ng-app="myapp" ng-controller="tableController">
 <table class="table table-stripe" >
   <thead><tr>
     <th>Name</th>
     <th>Gender</th>
     <th> City </th>
    </tr></thead>
   <tbody>
     <tr ng-repeat="emp in employees">
       <td> {{ emp.Name }}</td>
       <td> {{ emp.Gender }} </td>
       <td> {{ emp.City }} </td>
     </tr>
   </tbody>
 </table>
Try It Yourself ⇒

If you have observed in the above code ng-repeat will loop through employees object and will display all the records in table row format.

Conclusion: By this article we able to create dynamic HTML table with JSON data on page load in Angularjs. For binding JSON data, we use ng-repeat direction which acts as for loop of the object, and curly brasses {{}} to display data field values and hence we learned Angularjs JSON data binding.

Hope you like 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 *