Skip to content
Related Articles

Related Articles

AngularJS json Filter

Improve Article
Save Article
  • Last Updated : 26 Aug, 2022
Improve Article
Save Article

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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!