Filtre json AngularJS

Définition et utilisation

json Le filtre convertit un objet JavaScript en chaîne JSON.

Ce filtre est très utile lors du débogage de l'application.

Un objet JavaScript peut être de n'importe quel type d'objet JavaScript.

Pages associées

Tutoriel AngularJS :Filtres Angular

Exemple

Exemple 1

Afficher un objet JavaScript sous forme de chaîne JSON :

<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>

Essayez-le vous-même

Exemple 2

Assurez-vous que chaque indentation de la chaîne JSON comporte 12 espaces :

<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>

Essayez-le vous-même

Exemple 3

Objets JavaScript en tant qu'array :

<div ng-app="myApp" ng-controller="jsCtrl">
<h1>Noms de véhicules:</h1>
<pre>{{cars | json}}</pre>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('jsCtrl', function($scope) {
    $scope.cars = ["Audi", "BMW", "Ford"];
});
</script>

Essayez-le vous-même

Grammaire

{{ object | json : spacing }}

Paramètres

Paramètres Description
spacing Optionnel. Numérique, spécifiant le nombre d'espaces pour chaque indentation. La valeur par défaut est 2.