Skip to content

Comment utiliser le pipe json sur Angular ?

Intérêt

Le pipe json d'Angular est utilisé pour formatter un objet en chaîne de caractères JSON (JavaScript Object Notation)

Pensez à importer CommModule

Vous devez importer le module CommonModule dans votre module principal en ajoutant l'instruction suivante à la liste des imports de votre module :

ts
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  // ...
})
export class MyModule { }
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  // ...
})
export class MyModule { }

Utiliser le pipe json

Vous pouvez utiliser le pipe json comme n'importe quel autre pipe dans votre template HTML, en le suivant d'une expression entre accolades :

html
{{ objet | json }}
{{ objet | json }}

Par exemple, si vous avez un objet person dans votre composant Angular qui a les propriétés firstName et lastName, vous pouvez l'afficher sous forme de chaîne de caractères JSON en utilisant le pipe json comme suit :

html
<p>{{ person | json }}</p>
<p>{{ person | json }}</p>

Cela affichera quelque chose comme :

json
{ "firstName": "John", "lastName": "Doe" }
{ "firstName": "John", "lastName": "Doe" }

Vous pouvez également utiliser le pipe json avec d'autres options pour contrôler la manière dont les données sont formatées. Par exemple, vous pouvez utiliser l'option space pour ajouter des espaces de mise en forme à la chaîne de caractères JSON :

json
{{ objet | json:2 }}
{{ objet | json:2 }}

Cela ajoutera deux espaces de mise en forme à la chaîne de caractères JSON pour la rendre plus lisible.

WARNING

Il est important de noter que le pipe json ne fonctionne que sur des objets simples, et ne prend pas en charge les objets complexes tels que les tableaux ou les objets imbriqués. Si vous avez besoin de formater ces types d'objets, vous pouvez utiliser la méthode JSON.stringify() de JavaScript.