Wie man JSON in JavaScript schön ausgibt: Der vollständige Leitfaden

Einleitung: Warum JSON wie Matsch aussieht und wie man das behebt?

Haben Sie jemals die Browser-Konsole geöffnet, dort eine kilometerlange Zeile ohne ein einziges Leerzeichen gesehen und gedacht: „Wo ist hier der Fehler?“? Das ist ein Klassiker. JSON ist eine universelle Datenaustauschsprache, aber im Rohzustand liest es sich ungefähr wie eine Bedienungsanleitung für eine Mikrowelle auf Japanisch. Besonders wenn viele Daten vorhanden sind: verschachtelte Objekte, Arrays, lange Zeichenketten.

Glücklicherweise gibt es in JavaScript integrierte Werkzeuge, die diesen „Matsch“ in eine saubere, strukturierte Schönheit verwandeln. Der Vorgang heißt Pretty-print JSON (oder „schöne Ausgabe“). In diesem Artikel werden wir alle Methoden durchgehen: vom grundlegenden JSON.stringify bis zu fortgeschrittenen benutzerdefinierten Lösungen. Sie lernen nicht nur, JSON zu lesen, sondern dies auch komfortabel zu tun.

Der Artikel wurde für pythonlib.ru geschrieben – eine Bildungsressource, in der wir verständliche Erklärungen und lebendige Beispiele lieben. Los geht's!

Was ist Pretty-print JSON und warum wird es benötigt?

Pretty-print (oder prettify) ist der Prozess der Formatierung strukturierter Daten (JSON, XML, YAML) mit Einrückungen, Zeilenumbrüchen und Ausrichtung. Visuell sieht es aus wie schön formatierter Code und nicht wie eine einzige lange Zeile.

Warum wird es benötigt?

\n
• Debugging. Sie sehen die Struktur des Objekts: wo Schlüssel, wo verschachtelte Objekte, wo Arrays sind.
\n
• Lesen von Logs. In der Browser-Konsole oder Server-Logs rettet formatiertes JSON die Augen.
\n
• Dokumentation. JSON-Beispiele in der Dokumentation sind immer Pretty-print.
\n
• Lernen. Anfängern fällt es leichter, die Datenstruktur zu verstehen, wenn sie in Ebenen unterteilt ist.
\n

In JavaScript gibt es zwei Hauptwege, um schönes JSON zu erhalten: das integrierte JSON.stringify und externe Bibliotheken (z. B. pretty-js). Aber beginnen wir mit der Basis.

Methode 1: JSON.stringify() mit Parametern (die beliebteste)

Sie kennen sicherlich die Methode JSON.stringify(). Sie wandelt ein Objekt in einen JSON-String um. Aber sie hat einen zweiten und dritten Parameter, die Wunder bewirken.

Syntax

JSON.stringify(value, replacer, space)

\n
• value – Ihr Objekt oder Array.
\n
• replacer – eine Funktion oder ein Array zum Filtern von Schlüsseln (oft null).
\n
• space – die Anzahl der Leerzeichen für den Einzug (oder ein String, z. B. "\\t" für Tabulator).
\n

Beispiel 1: Basis-Pretty-print mit Leerzeichen

const user = {\n  name: "Alexej",\n  age: 30,\n  skills: ["JavaScript", "Python", "SQL"],\n  address: {\n    city: "Moskau",\n    zip: 101000\n  }\n};\n\n// Ohne Formatierung – eine Zeile\nconsole.log(JSON.stringify(user));\n// {"name":"Alexej","age":30,"skills":["JavaScript","Python","SQL"],"address":{"city":"Moskau","zip":101000}}\n\n// Mit Formatierung – Schönheit!\nconsole.log(JSON.stringify(user, null, 2));\n

Ergebnis in der Konsole:

{\n  "name": "Alexej",\n  "age": 30,\n  "skills": [\n    "JavaScript",\n    "Python",\n    "SQL"\n  ],\n  "address": {\n    "city": "Moskau",\n    "zip": 101000\n  }\n}\n

Beachten Sie: Einrückungen von 2 Leerzeichen haben die Struktur lesbar gemacht. Sie können 4 Leerzeichen oder Tabulator ("\\t") verwenden.

Beispiel 2: Verwendung von replacer zum Filtern

Manchmal muss nur ein Teil der Daten ausgegeben werden. Der zweite Parameter replacer kann ein Array von Schlüsseln sein.

const filtered = JSON.stringify(user, ["name", "skills"], 2);\nconsole.log(filtered);\n// {\n//   "name": "Alexej",\n//   "skills": [\n//     "JavaScript",\n//     "Python",\n//     "SQL"\n//   ]\n// }\n

Oder als Funktion:

const replacerFunc = (key, value) => {\n  if (key === "age") return undefined; // ausschließen