Skip to content
Related Articles

Related Articles

AngularJS | json Filter
  • Last Updated : 30 Apr, 2019


The json filter in AngularJs is used to convert a JavaScript object into a JSON. string.JavaScript object that we are using can be of any kind of JavaScript Object.

Syntax:

    {{ object | json : spacing }}

Where json is used to specifies that object should be displayed in JSON format and spacing is an optional parameter with default value 2 that specifies the number of spaces per indentation.

Example 1:
This example will display the marks of student in JSON




<!DOCTYPE html>
<html>
    <head>
<script src=
</script>
    </head>
<body>
  
<div ng-app="result" ng-controller="resultCtrl">
  
<h1>Result:</h1>
  
<pre>{{marks | json}}</pre>
  
</div>
  
<script>
var app = angular.module('result', []);
app.controller('resultCtrl', function($scope) {
$scope.marks = { 
        "Math" : 98,
        "Computer" : 93,
        "Physics" : 95,
        "Chemistry" : 95,
        "English" : 74
    };
});
</script>
  
</body>
</html>

Output :



output_img

Example 2:
This example will display fruits name in JSON with 10 spaces per indentation




<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body>
  
<div ng-app="fruit" ng-controller="fruitCtrl">
  
<h1>Fruits:</h1>
  
<pre>{{fruit | json : 10}}</pre>
  
</div>
  
<script>
var app = angular.module('fruit', []);
app.controller('fruitCtrl', function($scope) {
    $scope.fruit = ["Apple", "Banana", "Mango"];
});
</script>
  
</body>
</html>

Output :

My Personal Notes arrow_drop_up
Recommended Articles
Page :