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

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

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 :

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

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

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

Cela affichera quelque chose comme :

{ "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 :

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