Loading

Binding Table With JSON String Using Angular

Binding Table With JSON String Using Angular

Godly Mathew

10y2.3kCode

This is a very simple Javascript function, which helps to convert Json String to a HTML Table by using AngularJS Frameworks.

JSON String

Define a well structured Json string as shown below, this Json string contains the data of 2 IT departments:

JS (Functions)

var app = angular.module('myApp', []);
app.controller('employees', function($scope, $http) {
$scope.names = dept1.data;
$scope.next = function() {
$scope.names = dept2.data;
}
$scope.prev = function() {
$scope.names = dept1.data;
}
});

HTML

<div ng-app="myApp" ng-controller="employees">
<input type="button" value="Development" ng-click="prev();">
<input type="button" value="Testing" ng-click="next();">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>

CSS

table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 0.25rem;
text-align: left;
border: 1px solid #ccc;
}
tbody tr:hover {
background: yellow;
}