Le pipe json pour débugguer

En tant que développeur, on passe la majeure partie du temps à corriger des erreurs dans notre code. Saviez-vous qu'on estime que 70% du temps d'un développeur est utilisé pour débugger du code ?

Pour débugger, la première étape est souvent l'affichage en console.

Mais avec Angular on n'a parfois pas accès au console.log() facilement. Du fait qu'on travaille dans le template d'un composant et non pas dans un script.

C'est à ce moment-là qu'intervient le pipe json.

Que fait le pipe json ?

Le pipe json permet de convertir un objet en une chaîne de caractères qui représente sa valeur, directement dans le template.

Il s'utilise de la manière suivante :

1
{{ monObjet | json }}

Comment importer le pipe json ?

Le pipe json n'a pas besoin d'être importé.

Les directives natives, comme les pipes natifs d’Angular, viennent du CommonModule qui lui même est réexporté par le BrowserModule et est inclus de base dans votre fichier app.module.ts.

Dans quel cas utiliser le pipe json ?

Vous avez déjà vu ça sur votre écran ?

1
[Object object]

C'est ce qui s'affiche lorsqu'on essaye d'afficher un objet littéral directement dans le DOM. C'est dû au fait qu'en JS, les variables de type "object" contiennent une référence et non pas la valeur de l'objet directement.

Heureusement, le pipe json va nous aider à faire afficher le contenu de l'objet sans trop d'efforts.

Exemple d'utilisation

Le problème

Disons que vous avez un composant qui contient cet attribut val :

1
val: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};

Dans le template du composant, vous souhaitez afficher val avec une interpolation :

1
{{ val }}

Sans surprise, voici ce que vous obtenez sur votre page web :

1
[Object object]

Ca n'est pas ce qu’on voulait ! Angular affiche le contenu de la variable, donc une référence vers l’objet et non pas son contenu.

Cette référence se convertit automatiquement en [Object object] si on essaye de la caster en string. Ce qui est le cas lors d'un affichage.

La solution

Pour éviter d'obtenir [Object object] à l'affichage, vous allez devoir placer le pipe json dans votre interpolation.

Utilisez donc le pipe json dans votre template, de la manière suivante :

1
2
3
<pre>
{{ val | json}}
</pre>

Il est préférable d’afficher le résultat dans une balise <pre> pour prendre en compte les sauts de ligne.

Sur le template, voici le résultat de la transformation du pipe sur votre objet :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "foo": "bar",
    "baz": "qux",
    "nested": {
      "xyz": 3,
      "numbers": [
        1,
        2,
        3,
        4,
        5
      ]
    }
  }

Tadaa !

Maintenant vous pouvez observer en temps réel la structure de votre objet et ce qu’il contient.

Vous pouvez donc facilement parcourir votre objet et récupérer une donnée comme ceci :

1
{{ val.foo }}

Ce qui vous donne :

1
bar

Conclusion

C'est tout pour le pipe json. Il est relativement simple à utiliser si vous avez déjà manipulé des pipes.

N’hésitez pas à laisser un commentaire, en espérant que cela vous a plu !

Sources

• Angular Documentation : Pipe JSON