json filter – Displaying formatted JSON data

In AngularJS, the json filter is used to format JavaScript objects (JSON data) in a readable, well-structured manner. This filter is particularly useful for debugging and displaying nested data structures in an AngularJS application.

1. How to Use the JSON Filter?

The json filter can be applied in AngularJS templates using the pipe (|) symbol.

Basic Syntax

{{ object | json }}

This will convert the object into a formatted JSON string.

2. Example Usage of JSON Filter

Consider the following AngularJS controller:

var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
    $scope.user = {
        name: "Narendra",
        age: 27,
        skills: ["AngularJS", "JavaScript", "PowerApps"],
        address: {
            city: "Hyderabad",
            country: "India"
        }
    };
});

Displaying JSON Data in HTML

<div ng-app="myApp" ng-controller="MainCtrl">
    <pre>{{ user | json }}</pre>
</div>

🔹 The <pre> tag preserves formatting for better readability.

Output:

{
  "name": "Narendra",
  "age": 27,
  "skills": [
    "AngularJS",
    "JavaScript",
    "PowerApps"
  ],
  "address": {
    "city": "Hyderabad",
    "country": "India"
  }
}

3. JSON Filter in Controller Using `$filter`

You can also format JSON in an AngularJS controller using the $filter service.

Example: Formatting JSON in a Controller

app.controller('MainCtrl', function($scope, $filter) {
    var userData = {
        name: "Narendra",
        role: "Developer",
        skills: ["AngularJS", "JavaScript", "PowerApps"]
    };
    
    // Apply JSON filter manually
    $scope.formattedJson = $filter('json')(userData);
});

Displaying in HTML

<pre>{{ formattedJson }}</pre>

Output:

{
  "name": "Narendra",
  "role": "Developer",
  "skills": [
    "AngularJS",
    "JavaScript",
    "PowerApps"
  ]
}

4. How the JSON Filter Works Internally

The json filter is internally implemented using JavaScript’s JSON.stringify() method with formatting enabled.

Step-by-Step Execution

Detects the | json syntax in the AngularJS template.
Retrieves the json filter function from AngularJS’s $filterProvider.
Calls JavaScript’s JSON.stringify() method:
- Adds indentation for better readability.
- Converts objects into a JSON-formatted string.
Replaces the original object reference with the formatted JSON output.

5. Use Cases of the JSON Filter

1. Debugging Data in Templates

<pre>{{ userData | json }}</pre>

✔ Quickly view JSON output without opening the browser console.

2. Inspecting API Response Data

If you fetch data from an API, use the JSON filter to visualize it.

<pre>{{ apiResponse | json }}</pre>

3. Logging Data in a Readable Format

Instead of printing objects directly, format them using AngularJS’s $filter service.

console.log($filter('json')($scope.user));

6. Performance Considerations

Although the json filter is useful, it should be used cautiously in large applications.

Avoid Using the JSON Filter Inside `ng-repeat`

<li ng-repeat="item in users">
    <pre>{{ item | json }}</pre>
</li>

Problem:
Each digest cycle, AngularJS re-applies the filter, causing performance issues.

Optimize by Precomputing JSON Data

$scope.formattedUsers = users.map(u => $filter('json')(u));

<li ng-repeat="user in formattedUsers">
    <pre>{{ user }}</pre>
</li>

Improvement:
Pre-filtering JSON avoids unnecessary processing.