In this AngularJS json filter example you will learn how to display json formatted data using json filter.
Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.
Syntax
{{ object | json}}
<!DOCTYPE html>
<html>
<head> <!-- www.techstrikers.com -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<meta charset="utf-8">
<title>AngularJS Display json formatted data
using json filter Example</title>
<script>
var app = angular.module('app', []);
app.controller("ParentController", function ($scope) {
$scope.customer = [{
firstName:"Jimi",
lastName:"Scott",
accountType: {type:"current", accountNo:0832938393},
holdATMCard:true,
securityN0:"645454555",
phone: [9787876543,0898933223,9087656323]
},
{
firstName:"Bailey",
lastName:"Lee",
accountType: {type:"saving", accountNo:0832938393},
holdATMCard:true,
securityN0:"645454555",
phone: [6557876543,0898933444,9087656123]
},
{
firstName:"Aura",
lastName:"Martin",
accountType: {type:"saving", accountNo:0987632173},
holdATMCard:true,
securityN0:"423332333",
phone: [9907876543,0898933244,9087645123]
},
{
firstName:"Austin",
lastName:"Williams",
accountType: {type:"saving", accountNo:0978453321},
holdATMCard:true,
securityN0:"906663333",
phone: [6557876000,0898003444,9087600023]
},
{
firstName:"Bara",
lastName:"Miller",
accountType: {type:"current", accountNo:8965323232},
holdATMCard:true,
securityN0:"732678901",
phone: [6557854443,0898935554,9089886123]
},{
firstName:"Carlton",
lastName:"Taylor",
accountType: {type:"saving", accountNo:0832938393},
holdATMCard:true,
securityN0:"892312345",
phone: [1237876543,4448933444,8887656123]
},
{
firstName:"Adisa",
lastName:"White",
accountType: {type:"current", accountNo:9088753444},
holdATMCard:true,
securityN0:"976553444",
phone: [6544476543,0448933444,9087444123]
}];
});
</script>
</head>
<body style="background-color:#DDE4E9;">
<fieldset style="background-color:#DDE4E9;">
<legend>AngulerJS Display json formatted data
using json filter Example</legend>
<div ng-app="app">
<div ng-controller="ParentController">
{{customer | json}}
</div>
</div>
</div>
</fieldset>
</body>
</html>