Open In App

AngularJS json Filter

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

 



Last Updated : 26 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads