Comment utiliser le pipe json sur Angular ?

Entrée:

Résultat:

{ "name": "John", "age": 30 }

Syntaxe Angular:

{{ {"name": "John", "age": 30} | json }}

Lors du développement d'applications Angular, il est souvent nécessaire de visualiser la structure et le contenu des objets JavaScript ou des tableaux, notamment pendant le débogage ou le développement. Le pipe json d'Angular est un outil simple mais puissant qui facilite cette tâche.

Qu'est-ce que le pipe json ?

Le pipe json en Angular est un outil de transformation qui prend n'importe quelle valeur en entrée et la convertit en sa représentation JSON formatée. Il est particulièrement utile pour afficher le contenu des objets et des tableaux de manière lisible.

Utilisation de base

Dans les templates

La façon la plus courante d'utiliser le pipe json est directement dans vos templates Angular :

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

L'utilisation de la balise <pre> est recommandée pour préserver le formatage et les sauts de ligne.

Dans le code TypeScript

Bien que moins courant, vous pouvez également utiliser le pipe json dans votre logique de composant. Voici un exemple :

import { Component } from '@angular/core';
import { CommonModule, JsonPipe } from '@angular/common';
import { inject } from '@angular/core';

@Component({
  selector: 'app-json-formatter',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h2>Objet original :</h2>
    <pre>{{ objectToDisplay | json }}</pre>
    <h2>Objet formaté par le code :</h2>
    <pre>{{ formattedObject }}</pre>
  `
})
export class JsonFormatterComponent {
  objectToDisplay = {
    name: 'John Doe',
    age: 30,
    hobbies: ['reading', 'swimming', 'coding']
  };
  
  private jsonPipe = inject(JsonPipe);
  formattedObject: string;

  constructor() {
    this.formattedObject = this.jsonPipe.transform(this.objectToDisplay);
  }
}

Caractéristiques du pipe json

1. Indentation automatique : Le pipe json formate automatiquement la sortie avec une indentation appropriée, ce qui rend la structure de l'objet facilement lisible.

2. Gestion des types complexes : Il peut gérer des objets complexes imbriqués et des tableaux.

3. Échappement des caractères spéciaux : Les caractères spéciaux sont correctement échappés dans la sortie JSON.

4. Circularité : Le pipe json gère les références circulaires en les remplaçant par le texte "[object Object]" pour éviter les boucles infinies.

Cas d'utilisation courants

• Débogage des données dans les templates.
• Affichage des résultats d'appels API pendant le développement.
• Visualisation de l'état des composants.
• Création rapide de vues de données brutes pour le prototypage.

Limitations

• Le pipe json n'est pas recommandé pour une utilisation en production, car il peut exposer des données sensibles.
• Pour les grands objets, l'utilisation excessive du pipe json peut avoir un impact sur les performances.

Résumé

Pipe	Paramètres	Type d'entrée	Description
json	value: any	any	Valeur à convertir en représentation JSON formatée