JsonPipe

Funktionsweise von JsonPipe

JsonPipe verwendet intern die JavaScript-Methode JSON.stringify(), um Objekte in JSON-Strings umzuwandeln. Es nimmt ein JavaScript-Objekt als Eingabe und gibt einen formatierten JSON-String zurück. Der zurückgegebene String enthält Einrückungen und Zeilenumbrüche, was die Lesbarkeit verbessert.

Syntax

Die Syntax für die Verwendung von JsonPipe ist recht einfach und sieht wie folgt aus:

{{ objekt | json }}

Wobei objekt das JavaScript-Objekt ist, das in einen JSON-String konvertiert werden soll.

Einfaches Beispiel

Hier ein einfaches Beispiel mit einem vereinfachen Component.

export class MeineKomponente {
    person = {
        name: 'Max Mustermann',
        alter: 30,
        stadt: 'Berlin'
    };
}

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

Debugging während der Entwicklung

Einer der häufigsten Anwendungsfälle ist das Debugging während der Entwicklung. Anstatt komplexe Konsolen-Logs zu schreiben, können Sie einfach JsonPipe verwenden, um den Zustand Ihrer Objekte direkt in der Benutzeroberfläche anzuzeigen.

Angenommen, man lädt bestimmte Daten von einer API und möchte die Struktur dieser Daten schnell und bequem ausgeben.

import { Component, OnInit } from '@angular/core';
import { JsonPipe } from '@angular/common';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-json-data',
    imports: [JsonPipe],
    templateUrl: './json-data.template.html'
})
export class JsonDataComponent implements OnInit {

    user: any;
    loading = false;

    constructor(
        private http: HttpClient
    ) {}

    ngOnInit(): void {
        this.http.get('https://jsonplaceholder.typicode.com/users/1').subscribe({
            next: data => {
                this.user = data;
                this.loading = false;
            },
            error: error => {
                console.log('ERROR:', error);
            }
        });
    }

}

Hier soll bedacht werden, JsonPipe aus dem Paket @angular/common zu importieren und im Component zu verwenden.

<div>Status: {{ loading ? 'Loading ...' : 'Loaded!' }}</div>
<pre>{{ user | json }}</pre>

Die Ausgabe sieht dann im HTML-Template wie folgt aus.

Status: Loaded!
{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
        "street": "Kulas Light",
        "suite": "Apt. 556",
        "city": "Gwenborough",
        "zipcode": "92998-3874",
        "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
        }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
        "name": "Romaguera-Crona",
        "catchPhrase": "Multi-layered client-server neural-net",
        "bs": "harness real-time e-markets"
    }
}