Source Code

Convert JSON Data Dynamically to HTML Table using Angular

Display JSON in Table with AngularJS - Angular Script

JSON is lightweight and language independent and that is why its commonly used with jQuery Ajax for transferring data.

Search

orderID orderName orderStatus orderDate orderedBy
#{{item.orderID}} {{item.orderName}} {{item.orderStatus}} {{item.orderStatus}} {{item.orderStatus}} {{item.orderStatus}} {{item.orderStatus}} {{item.orderStatus}} {{item.orderStatus}} {{item.orderDate}} {{item.orderedBy}}

No Found Data

Total No Of Records Found : {{filtered.length}}

Example : index.html


<!doctype html>
<html ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>Angular Application - Angular king</title>	
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css">
	<script src="angular.min.js" type="text/javascript" ></script>
</head>
<body>
<!-- used controller -->
<div  ng-controller="mycontroller">
<div class="container">
<br/>
<div class="row well">
	<div class="col-md-3">
		<h3>Search</h3>
	</div>
	<div class="col-md-4">
			<input type="text" class="form-control" ng-model="search" placeholder="Enter Search word"/>
	</div>

</div>
<table id="example" class="table table-striped table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
	<th>orderID</th>
	<th>orderName</th>
	<th>orderStatus</th>
	<th>orderDate</th>
	<th>orderedBy</th>             
</tr>
</thead>

<tbody>
<!--ng-repeat is a loop-->
<tr  ng-repeat="item in filtered =(jsondata | filter:search)">
	<td><a href="">#{{item.orderID}}</a></td>
	<td>{{item.orderName}}</td>
	<td>
			<span ng-if="item.orderStatus=='Active' || item.orderStatus=='Success'" class = "label label-success">{{item.orderStatus}}</span>
			<span ng-if="item.orderStatus=='Inactive' || item.orderStatus=='InActive' " class = "label label-danger">{{item.orderStatus}}</span>
			<span ng-if="item.orderStatus=='Pending'" class = "label label-warning">{{item.orderStatus}}</span>
			<span ng-if="item.orderStatus=='Cancelled'" class = "label label-primary">{{item.orderStatus}}</span>
			<span ng-if="item.orderStatus=='Processing'" class = "label label-info">{{item.orderStatus}}</span>
			<span ng-if="item.orderStatus=='NotFound'" class = "label label-default">{{item.orderStatus}}</span>
			<span ng-if="item.orderStatus=='Initiated'" >{{item.orderStatus}}</span>
			
		
	</td>
	<td>{{item.orderDate}}</td>
	<td>{{item.orderedBy}}</td>
	
</tr>
</tbody>
</table>
		   <div ng-show="filtered.length=='0'" class="well"> <h3 align="center">No Found Data</h3></div>
		  <div class="well"> Total No Of Records Found :<mark> {{filtered.length}}</mark></div>
		
</div>
</div>
</body>
</html>

Example : App.js


var app = angular.module('myApp', []);

app.controller('mycontroller',function($scope, $http){
$scope.jsondata=[ {"orderID":"1234","orderName":"Angular","orderStatus":"Active","orderDate":"12/15/2000","orderedBy":"syam@cisco.com"},
{"orderID":"4555","orderName":"iOS","orderStatus":"Active","orderDate":"12/12/2013", "orderedBy":"Syam@cisco.com"},
{"orderID":"8941","orderName":"TelePhone","orderStatus":"Inactive","orderDate":"08/06/2000", "orderedBy":"Nagesh@cisco.com"},
{"orderID":"7784699","orderName":"PhoneCase","orderStatus":"Active","orderDate":"11/08/2019", "orderedBy":"Kamilesh@cisco.com"},
{"orderID":"654211","orderName":"PhoneScreen","orderStatus":"Active","orderDate":"12/15/2000", "orderedBy":"syam@cisco.com"},
{"orderID":"1289","orderName":"Table","orderStatus":"Active","orderDate":"12/15/2000", "orderedBy":"Mahesh@cisco.com"},
{"orderID":"1278","orderName":"Webex","orderStatus":"Pending","orderDate":"12/13/2014", "orderedBy":"Pramod@cisco.com"},
{"orderID":"0004","orderName":"Jabber","orderStatus":"Cancelled","orderDate":"11/06/2013", "orderedBy":"Murali@cisco.com"},
{"orderID":"7777","orderName":"Cell","orderStatus":"Processing","orderDate":"09/12/2016", "orderedBy":"Tom@cisco.com"},
{"orderID":"1000","orderName":"CellPhone","orderStatus":"Active","orderDate":"12/15/2000", "orderedBy":"Nagesh@cisco.com"},
{"orderID":"1234","orderName":"Vision","orderStatus":"Initiated","orderDate":"12/06/2019", "orderedBy":"syam@cisco.com"},
{"orderID":"0000","orderName":"Windows","orderStatus":"InActive","orderDate":"12/15/2012", "orderedBy":"Ron@cisco.com"},
{"orderID":"1004","orderName":"Apple","orderStatus":"Active","orderDate":"12/15/2000", "orderedBy":"syam@cisco.com"},
{"orderID":"1239999","orderName":"MacBook","orderStatus":"InActive","orderDate":"12/15/1999", "orderedBy":"NagaRaj@cisco.com"},
{"orderID":"13334","orderName":"IpadPro","orderStatus":"InActive","orderDate":"12/12/2000", "orderedBy":"Suneel@cisco.com"},
{"orderID":"6893","orderName":"IpadMin","orderStatus":"Active","orderDate":"12/15/2012", "orderedBy":"Todd@cisco.com"},
{"orderID":"1234578","orderName":"IpadAir","orderStatus":"Success","orderDate":"12/15/2010", "orderedBy":"Anna@cisco.com"},
{"orderID":"1234567","orderName":"SurfacePro","orderStatus":"NotFound","orderDate":"12/15/2121", "orderedBy":"Jason@cisco.com"},
{"orderID":"4444","orderName":"Mac","orderStatus":"Pending","orderDate":"08/08/2018", "orderedBy":"Mohan@cisco.com"}] ;
});

Example : Style.css


<head>
	<meta charset="UTF-8">
	<title>Angular Application - Angular king</title>	
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css">
	<script src="angular.min.js" type="text/javascript" ></script>
</head>