Wenn du während der Entwicklung ein komplexes Objekt oder ein Array direkt im Template anzeigen möchtest, gibt Angular standardmäßig oft nur [object Object] aus. Hier kommt die JsonPipe ins Spiel: Sie wandelt jede beliebige Datenstruktur im Hintergrund mittels JSON.stringify() in einen gut lesbaren, formatierten JSON-String um.
Verwendung für schnelles Debugging
Die JsonPipe wird typischerweise nicht für den Endnutzer in Produktion eingesetzt, sondern ist ein reines Entwickler-Werkzeug. Du nutzt sie, um den aktuellen Zustand einer Variablen oder das Ergebnis einer HTTP-Anfrage live auf dem Bildschirm zu visualisieren, ohne mühsam mit console.log() im Code herumspringen zu müssen.
import { Component } from '@angular/core';
import { JsonPipe } from '@angular/common'; // Import notwendig!
@Component({
selector: 'app-debug',
template: `
<h3>Aktueller Benutzer:</h3>
<!-- Ohne Pipe: [object Object] -->
<p>Rohdaten: {{ user }}</p>
<!-- Mit JsonPipe: Formatierte Ausgabe -->
<pre>{{ user | json }}</pre>
`,
standalone: true,
imports: [JsonPipe]
})
export class DebugComponent {
user = {
id: 42,
name: 'Max Mustermann',
roles: ['admin', 'editor'],
settings: {
theme: 'dark'
}
};
}Warum der <pre>-Tag so wichtig ist
Im obigen Beispiel wird das Ergebnis der Pipe in einen <pre>-Tag (Preformatted Text) gewickelt. Die JsonPipe formatiert den Text nämlich mit echten Zeilenumbrüchen (\n) und Einrückungen (2 Leerzeichen).
Würdest du das Ergebnis in ein normales <div> oder <p> packen, würde der Browser alle Leerzeichen und Umbrüche nach Standard-HTML-Regeln ignorieren und alles gnadenlos in eine einzelne, schwer lesbare Zeile quetschen.
Kombination mit der AsyncPipe
Ein extrem mächtiges und oft genutztes Muster ist die Kombination aus der AsyncPipe (um Daten live von einem Server zu laden) und der JsonPipe (um sie direkt auf den Bildschirm zu werfen). So siehst du bei der API-Anbindung sofort, ob der Server das gewünschte Format liefert.
<!-- Lade Daten vom Observable und formatiere das Ergebnis sofort als JSON -->
<pre>{{ userData$ | async | json }}</pre>Performance & Stolperfallen
Obwohl die JsonPipe unglaublich praktisch ist, gibt es zwei Dinge, auf die du achten solltest:
1. Performance-Kosten
Unter der Haube ruft die JsonPipe bei jedem Change-Detection-Zyklus die JavaScript-Methode JSON.stringify() auf. Bei sehr großen und tief verschachtelten Arrays (z.B. tausenden von Datensätzen) ist das extrem rechenintensiv und kann den Browser einfrieren lassen. Nutze sie also wirklich nur gezielt zum Debuggen.
2. Zirkuläre Referenzen (Cyclic Objects)
Wenn dein Objekt auf sich selbst verweist (z.B. parent hat ein child, und child verweist zurück auf parent), wirft JSON.stringify() einen fatalen Fehler (TypeError: Converting circular structure to JSON). Da die JsonPipe genau diese Methode nutzt, wird auch deine Angular-App in diesem Moment abstürzen und eine weiße Seite anzeigen.
FAQ zur JsonPipe
Wann sollte ich die JsonPipe einsetzen?
Ausschließlich während der Entwicklung — etwa um die Antwort eines neuen API-Endpoints schnell sichtbar zu machen oder um den State eines reaktiven Formulars (form.value) live zu inspizieren. In Produktion gehört die Pipe nicht ins Template, weil Endnutzer keinen Roh-JSON sehen sollen und die Performance-Kosten unnötig sind.
Ist die JsonPipe pure oder impure?
Sie ist als impure klassifiziert und läuft daher bei jedem Change-Detection-Zyklus erneut. Bei großen Objekten ruft Angular also potenziell viele Male pro Sekunde JSON.stringify() auf. Bei Listen mit hunderten Einträgen macht sich das in den DevTools sofort als Long Task bemerkbar.
Warum stürzt meine App mit „Converting circular structure“ ab?
Das passiert, wenn dein Objekt eine zirkuläre Referenz hat (z. B. ein parent-Knoten zeigt auf ein child, das zurück auf parent verweist). JSON.stringify() wirft dann einen TypeError, und weil die Pipe diesen Fehler nicht abfängt, bricht das Template-Rendering komplett. Lösung: Mit structuredClone() einen flachen Snapshot machen oder gezielt nur das benötigte Sub-Objekt übergeben.
Wie werden undefined und Funktionen serialisiert?
JSON.stringify() unterschlägt Properties mit dem Wert undefined, sowie Methoden und Symbole. Dein Output kann also weniger Felder enthalten als das Original-Objekt. Werte wie NaN oder Infinity erscheinen als null. Für ein vollständigeres Debug-Bild ist console.log(structuredClone(obj)) oft hilfreicher.
Kann ich die Einrückung ändern?
Nein. Die JsonPipe nutzt fest 2 Leerzeichen Einrückung und bietet keine Konfigurationsparameter. Wenn du eigene Formatierung brauchst (z. B. kompakte Einzeiler oder 4 Leerzeichen), schreibst du eine eigene Pipe, die intern JSON.stringify(value, null, 4) aufruft.