Please note, this is a STATIC archive of website www.w3schools.com from 05 May 2020, cach3.com does not collect or store any user information, there is no "phishing" involved.
THE WORLD'S LARGEST WEB DEVELOPER SITE

AngularJS json Filter


Example

Display a JavaScript object as a JSON string:

<div ng-app="myApp" ng-controller="jsCtrl">

<h1>Customer:</h1>

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

</div>

<script>
var app = angular.module('myApp', []);
app.controller('jsCtrl', function($scope) {
    $scope.customer = {
        "name" : "Alfreds Futterkiste",
        "city" : "Berlin",
        "country" : "Germany"
    };
});
</script>
Try it Yourself »

Definition and Usage

The json filter converts a JavaScript object into a JSON string.

This filter can be useful when debugging your applications.

The JavaScript object can be any kind of JavaScript object.


Syntax

{{ object | json : spacing }}

Parameter Values

Value Description
spacing Optional. A number specifying how many spaces to user per indentation. The default value is 2


More Examples

Example

Make sure that the JSON string is written with 12 spaces per indentation:

<div ng-app="myApp" ng-controller="jsCtrl">

<h1>Customer:</h1>

<pre>{{customer | json : 12}}</pre>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('jsCtrl', function($scope) {
    $scope.customer = {
        "name" : "Alfreds Futterkiste",
        "city" : "Berlin",
        "country" : "Germany"
    };
});
</script>
Try it Yourself »

Example

The JavaScript object as an array:

<div ng-app="myApp" ng-controller="jsCtrl">

<h1>Carnames:</h1>

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

</div>

<script>
var app = angular.module('myApp', []);
app.controller('jsCtrl', function($scope) {
    $scope.cars = ["Audi", "BMW", "Ford"];
});
</script>
Try it Yourself »

Related Pages

AngularJS Tutorial: Angular Filters