In this article I will explain with an example, how to populate HTML Table from external API using AngularJS.
The HTML Table will be populated from a JSON array using AngularJS.
 
 
ASPSnippets Test API
The following API will be used in this article.
https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json
The API returns the following JSON.
[
   {
      "CustomerId":1,
      "Name":"John Hammond",
      "Country":"United States"
   },
   {
      "CustomerId":2,
      "Name":"Mudassar Khan",
      "Country":"India"
   },
   {
      "CustomerId":3,
      "Name":"Suzanne Mathews",
      "Country":"France"
   },
   {
      "CustomerId":4,
      "Name":"Robert Schidner",
      "Country":"Russia"
   }
]
 
 
Populating HTML Table from API using AngularJS
The following HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The HTML DIV consists of an HTML Table which will be populated from JSON array using ng-repeat directive.
Inside the Controller, the API is called using the $http service. The $http service has following properties and methods.
Properties
1. method – The method type of HTTP Request i.e. GET or POST.
2. url – URL of the API.
 
Event Handler
1. success – This event handler is triggered once the call is successfully executed.
2. error – This event handler is triggered when the call encounters an error.
Inside the Success event handler of the $http service the response is received in JSON format and assigned to the Customers variable.
The ng-repeat directive as the name suggests repeats the element based on the length of the collection, in this scenario it will repeat the TR element (HTML Table Row).
The TBODY element of the HTML Table has been assigned ng-repeat directive in order to iterate through all the items of the Customers JSON array.
Finally, for each JSON object in the Customers JSON array, a TR element (HTML Table Row) is generated and appended into the HTML Table.
<div ng-app="MyApp" ng-controller="MyController">
    <h4>Customers</h4>
    <hr/>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th>CustomerId</th>
            <th>Name</th>
            <th>Country</th>
        </tr>
        <tbody ng-repeat="m in Customers">
            <tr>
                <td>{{m.CustomerId}}</td>
                <td>{{m.Name}}</td>
                <td>{{m.Country}}</td>
            </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $http, $window) {
        var get = $http({
            method: "GET",
            url: "https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json"
        });
 
        get.success(function (data, status) {
            $scope.Customers = data;
        });
 
        get.error(function (data, status) {
            $window.alert(data.Message);
        });
    });
</script>
 
 
Screenshot
Populate Table from API using AngularJS
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code