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.

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.

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!