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. The json filter piped the object or any expression with JSON so that the result will be displayed in the form of a list, which is bound with the expression syntax.
Syntax:
{{ object | json : spacing }}Parameter value:
- json: It is used to specify that the object should be displayed in JSON format.
- spacing: It is an optional parameter with a default value of 2 that specifies the number of spaces per indentation.
Example 1: This example will display the marks of students in JSON.
HTML
<!DOCTYPE html> <html>
<head>
<title>AngularJS json Filter</title>
<script src=
</script>
</head>
<body style="text-align: center;">
<div ng-app="result" ng-controller="resultCtrl">
<h1 style="color:green ;">GeeksforGeeks</h1>
<h3>AngularJS json Filter</h3>
<h4>Result:</h4>
<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:
Example 2: This example will display the fruits name in JSON with 10 spaces per indentation
HTML
<!DOCTYPE html> <html>
<head>
<title>AngularJS json Filter</title>
<script src=
</script>
</head>
<body style="text-align: center;">
<h1 style="color:green ;">GeeksforGeeks</h1>
<h3>AngularJS json Filter</h3>
<div ng-app="fruit" ng-controller="fruitCtrl">
<h4>Fruits:</h4>
<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: