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

Satinder Singh / August 24, 2021 / 0 Comments

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.

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

Output:

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

View Demo

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

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