Angularjs Examples

AJS Examples


AngularJS Display JSON Formatted Data Using JSON Filter

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}}

AngularJS Display json formatted data using json filter Example

<!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>