Online Snippets Library

Create HTML Table using json in AngularJS

To Create HTML Table using json,we will use ngRepeat directive of AngularJS.

Example

HTML
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1">
<tr ng-repeat="x in names">
<td>{{x.Name}}</td>
<td>{{x.City}}</td>
<td>{{x.Country}}</td></tr>
</table>
</div>
</body>
</html>
JavaScript
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
  $scope.names =[
  {
    "Name" : "Max Joe",
    "City" : "Lulea",
    "Country" : "Sweden"
  },
    {
    "Name" : "Manish",
    "City" : "Delhi",
    "Country" : "India"
  },
  {
    "Name" : "Koniglich",
    "City" : "Barcelona",
    "Country" : "Spain"
  },
  {
    "Name" : "Wolski",
    "City" : "Arhus",
    "Country" : "Denmark"
  }
];     
});