JSON in JavaScript formatieren (Pretty Print)

Der schnellste Weg, JSON in JavaScript zu formatieren, ist JSON.stringify(value, null, 2). Das dritte Argument, der space-Parameter, weist die Engine an, jede verschachtelte Ebene einzurücken und so aus einer einzelnen dichten Zeile eine lesbare, hübsch formatierte Ausgabe zu machen. Dieser Einzeiler deckt die meisten Fälle ab, scheitert jedoch an zirkulären Referenzen, lässt Funktionen und undefined stillschweigend weg und gibt Ihnen keine Kontrolle darüber, welche Felder ausgegeben werden. Diese Anleitung führt durch den vollständigen Code-Pfad und die Kantenfälle, die jedes Tutorial überspringt.

Wenn Sie nur einmal eine saubere Ausgabe benötigen und kein Wegwerf-Skript schreiben möchten, können Sie den Rohtext in einen kostenlosen Online-JSON-Formatter einfügen und das Ergebnis kopieren. Für alles, was innerhalb Ihres Codes passieren muss, behandeln die folgenden Abschnitte die Argumente, die Fallstricke und die Muster, die in der Produktion tatsächlich zählen.

So formatieren Sie JSON in JavaScript mit JSON.stringify#

JSON.stringify() akzeptiert drei Argumente: den zu serialisierenden Wert, einen optionalen replacer und einen optionalen space. Für eine hübsche Ausgabe überspringen Sie den replacer mit null und übergeben eine Zahl oder einen String als space.

const user = { name: "Ada", roles: ["admin", "editor"], active: true };

// Kompakt (Standard), alles in einer Zeile
JSON.stringify(user);
// {"name":"Ada","roles":["admin","editor"],"active":true}

// Hübsch formatiert mit 2 Leerzeichen Einzug
JSON.stringify(user, null, 2);
// {
//   "name": "Ada",
//   "roles": [
//     "admin",
//     "editor"
//   ],
//   "active": true
// }

Das space-Argument ist für die Formatierung verantwortlich. Übergeben Sie eine Zahl von 1 bis 10 für die entsprechende Anzahl Leerzeichen Einzug pro Ebene, oder einen String (wie "\t"), um mit diesem String einzurücken.

Zahlen über 10 werden auf 10 begrenzt. JSON.stringify(obj, null, 50) verhält sich genau wie JSON.stringify(obj, null, 10), erwarten Sie also keinen tieferen Einzug durch eine größere Zahl.

Der space-Parameter: Zahlen vs. Strings#

Das space-Argument akzeptiert zwei Typen, und der Typ ändert den Ausgabestil:

space-Wert	Ergebnis	Häufige Verwendung
2	Zwei Leerzeichen pro Ebene	JavaScript, JSON-Konfiguration, die meisten Web-Ökosysteme
4	Vier Leerzeichen pro Ebene	Python-Tooling, einige Java/.NET-Ausgaben
"\t"	Ein Tab pro Ebene	Repos mit Tab-basiertem Styleguide
0, null oder weggelassen	Keine Formatierung, einzelne Zeile	API-Payloads, Speicherung, Netzwerktransfer

Ein String-space ermöglicht Dinge, die eine Zahl nicht kann. Übergeben Sie " " (zwei Leerzeichen) für denselben Effekt wie 2, oder etwas Visuelles wie "--", um die Verschachtelungstiefe zu debuggen. Nur die ersten 10 Zeichen eines String-space werden verwendet.

Warum 2 vs. 4 Leerzeichen tatsächlich wichtig ist#

Das ist keine unnötige Diskussion. Die Einzugsbreite ist eine Ökosystem-Konvention, und sie einzuhalten hält Ihre Ausgabe konsistent mit den Tools, die sie als Nächstes lesen.

• 2 Leerzeichen ist der De-facto-Standard in der JavaScript- und Node-Welt. Prettier verwendet standardmäßig 2, npm's package.json verwendet 2, und die meisten JSON-Konfigurationsdateien, die Sie bearbeiten (tsconfig.json, .eslintrc.json), folgen diesem Beispiel.
• 4 Leerzeichen tauchen auf, wenn die umgebende Sprache 4 verwendet, insbesondere Pythons json.dumps(obj, indent=4). Wenn eine JSON-Datei neben Python-Code liegt oder von einem Python-Dienst generiert wird, sorgt 4 für visuelle Übereinstimmung.
• Tabs erscheinen in Repos mit einem tab-basierten Styleguide. Der Vorteil ist, dass jeder Entwickler seine eigene Tab-Anzeigebreite einstellen kann.

Wenn Ihr Projekt Prettier oder einen Formatierer bei Commits verwendet, passen Sie dessen Einstellung an, damit Sie nicht gegen den Auto-Formatierer kämpfen. Im Zweifelsfall verwenden Sie 2.

Verwenden einer Ersetzungsfunktion zur Steuerung der Ausgabe#

Das zweite Argument replacer ist die am wenigsten genutzte Funktion von JSON.stringify. Es steuert, welche Eigenschaften serialisiert werden und wie ihre Werte transformiert werden. Es akzeptiert entweder ein Array oder eine Funktion.

Ersetzung als Whitelist-Array#

Übergeben Sie ein Array mit Eigenschaftsnamen als Zeichenfolgen, und nur diese Schlüssel überleben. Dies ist der sauberste Weg, um sensible oder verrauschte Felder vor dem Protokollieren oder Senden von Daten zu entfernen.

const account = {
  id: 42,
  email: "[email protected]",
  passwordHash: "$2b$10$...",
  sessionToken: "abc123",
};

// Nur id und email gelangen in die Ausgabe
JSON.stringify(account, ["id", "email"], 2);
// {
//   "id": 42,
//   "email": "[email protected]"
// }

Die Whitelist gilt auf jeder Ebene des Objekts, sodass ein Schlüssel namens id überall im Baum erhalten bleibt. Das ist ein Vorteil für einheitliche Strukturen, aber eine Falle für Bäume, in denen derselbe Schlüsselname auf verschiedenen Ebenen unterschiedliche Bedeutungen hat.

Ersetzung als Transformationsfunktion#

Übergeben Sie eine Funktion, die für jedes Schlüssel-Wert-Paar ausgeführt wird. Geben Sie den Wert zurück, den Sie serialisieren möchten, geben Sie undefined zurück, um den Schlüssel zu entfernen, oder transformieren Sie ihn direkt. Die Funktion erhält den Schlüssel und den Wert, und this ist an das Objekt gebunden, das den Schlüssel enthält.

const order = { total: 19.99, secret: "hide-me", createdAt: new Date() };

const json = JSON.stringify(order, (key, value) => {
  if (key === "secret") return undefined;        // Feld entfernen
  if (typeof value === "number") return value.toFixed(2); // Zahlen formatieren
  return value;
}, 2);

Beachten Sie die Aufrufreihenfolge: Der Replacer wird zuerst mit einem leeren Schlüssel und dem gesamten Objekt aufgerufen, dann für jede Eigenschaft. Wenn Sie Werte blind transformieren, ohne den Schlüssel zu prüfen, können Sie versehentlich die Wurzel verstümmeln.

Eine sauberere Alternative für die objektbezogene Steuerung ist die Methode toJSON(). Jedes Objekt mit einer toJSON()-Methode (wie Date, weshalb Daten in ISO-Strings serialisiert werden) steuert seine eigene serialisierte Form, bevor der Replacer es überhaupt sieht.

Behebung des zirkulären Referenz-Typfehlers#

Dies ist der Fehler, den jedes grundlegende Tutorial ignoriert, und derjenige, der Sie tatsächlich zum Stillstand bringt. Wenn ein Objekt sich selbst referenziert, direkt oder über eine Kette, wirft JSON.stringify einen Fehler:

TypeError: Converting circular structure to JSON

Dies passiert ständig mit DOM-Knoten, ORM-Entitäten, die auf ihr übergeordnetes Element verweisen, Ereignisobjekten und allen graphförmigen Daten.

const node = { name: "root" };
node.self = node; // zirkulär

JSON.stringify(node, null, 2); // TypeError: Converting circular structure to JSON

Die Lösung ist ein Ersetzer, der bereits gesehene Objekte verfolgt und Wiederholungen überspringt:

function safeStringify(value, space = 2) {
  const seen = new WeakSet();
  return JSON.stringify(value, (key, val) => {
    if (typeof val === "object" && val !== null) {
      if (seen.has(val)) return "[Circular]";
      seen.add(val);
    }
    return val;
  }, space);
}

safeStringify(node);
// {
//   "name": "root",
//   "self": "[Circular]"
// }

Ein WeakSet ist hier das richtige Werkzeug, da es die Garbage Collection der verfolgten Objekte nicht verhindert. Wenn Sie ein aktuelles Node oder einen modernen Browser verwenden, wirft auch der globale structuredClone einen Fehler bei zirkulären Daten, sodass ein Seen-Set-Ersetzer der praktische Workaround für die Serialisierung bleibt.

Werte, die stillschweigend verschwinden#

JSON.stringify wirft nicht nur bei zirkulären Daten einen Fehler. Es lässt mehrere Wertetypen stillschweigend weg oder ändert sie, was zu verwirrenden Fehlern führt, bei denen ein Feld "verschwindet".

• Funktionen und undefined werden vollständig aus Objekten entfernt und werden innerhalb von Arrays zu null.
• NaN und Infinity werden zu null serialisiert.
• BigInt wirft einen TypeError. Sie müssen es zuerst in einen String oder eine Zahl umwandeln.
• Symbol-Schlüssel und -Werte werden ignoriert.
• Date wird zu einem ISO-String (über sein toJSON), sodass es beim Parsen nicht zurück zu einem Date wird.

Wenn eine Eigenschaft in Ihrer Ausgabe fehlt, ist fast immer einer dieser Gründe dafür verantwortlich.

So minifizieren Sie JSON in JavaScript#

Minifizieren ist das Gegenteil von Pretty-Printing: Entfernen Sie sämtliche Leerzeichen für die kleinstmögliche Nutzlast. Sie minifizieren, indem Sie JSON.stringify ohne space-Argument (oder mit 0) aufrufen.

const data = { name: "Ada", roles: ["admin", "editor"] };

JSON.stringify(data);
// {"name":"Ada","roles":["admin","editor"]}

Um von Pretty zu Minified zu wechseln, parsen Sie den formatierten String zurück in ein Objekt und stringifizieren ihn erneut ohne space:

const pretty = `{
  "name": "Ada",
  "active": true
}`;

const minified = JSON.stringify(JSON.parse(pretty));
// {"name":"Ada","active":true}

Dieses JSON.parse-gefolgt-von-JSON.stringify-Muster ist auch der einfachste Weg, um unvertrautes, schlecht eingerücktes JSON neu zu formatieren: Parse normalisiert es, und Stringify gibt es mit dem von Ihnen gewählten Abstand wieder aus. Der Haken ist, dass JSON.parse streng ist, sodass nachgestellte Kommas, einfache Anführungszeichen, Kommentare oder eine versehentliche HTML-Antwort einen SyntaxError auslösen, bevor Sie überhaupt etwas formatieren können.

Wann Sie ganz auf Code verzichten sollten#

JSON.stringify zu schreiben ist die richtige Wahl, wenn die Formatierung innerhalb Ihrer Anwendung stattfindet: Logging, Erstellen von Konfigurationsdateien zur Laufzeit, Normalisieren einer API-Antwort. Aber oft haben Sie nur einen unformatierten JSON-Block in Ihrer Zwischenablage und brauchen ihn sofort lesbar. Ein REPL zu öffnen, zu parsen, zu stringifizieren und zurückzukopieren ist langsamer als nötig.

Dafür ist ein browserbasierter Formatierer schneller und sicherer:

• Er validiert beim Formatieren, sodass fehlerhaftes JSON eine klare Fehlermeldung mit Zeile und Spalte erhält, anstatt einen kryptischen Fehler zu werfen.
• Sie wechseln zwischen 2 Leerzeichen, 4 Leerzeichen, Tabulator oder minimierter Ausgabe, ohne Code umschreiben zu müssen.
• Er verarbeitet große Datenmengen, die Ihre Konsole überladen würden.
• Gute Formatierer laufen vollständig clientseitig, sodass Ihre Daten den Browser nie verlassen.

Der Molixa JSON-Formatierer und -Validator macht genau das: Einfügen, hübsch formatierte und validierte Ausgabe erhalten, Einrückung wechseln und kopieren. Wenn Sie tiefer in die Gründe eintauchen möchten, warum ein JSON-Formatierer ein tägliches Entwicklerwerkzeug ist, zeigt unser Artikel Warum ein JSON-Formatierer ein tägliches Entwicklerwerkzeug ist den Workflow. Und wenn die formatierte Ausgabe in getypten Code umgewandelt werden muss, erklärt die Anleitung JSON zu TypeScript Interface, wie Sie aus einer sauberen Nutzlast echte Interfaces erstellen.

So erstellen Sie eine wiederverwendbare JSON-Formatierungsfunktion#

Wenn Sie JSON an mehreren Stellen formatieren, packen Sie das sichere Muster einmal in eine Funktion und verwenden Sie es wieder, anstatt JSON.stringify(obj, null, 2) über die gesamte Codebasis zu streuen. Befolgen Sie diese Schritte, um einen Helfer zu bauen, der hübsch druckt, minimiert, Tabs verarbeitet und niemals einen Fehler wirft.

Schritt 1: Ein Seen-Set einrichten, um zirkuläre Referenzen abzufangen#

Beginnen Sie mit einem WeakSet, um Objekte zu verfolgen, die Sie bereits serialisiert haben. Ein WeakSet ist die richtige Wahl, da es schwache Referenzen hält und die Garbage Collection dieser Objekte nicht blockiert.

function formatJSON(value, { indent = 2, safe = true } = {}) {
  const seen = new WeakSet();
  // Replacer kommt als nächstes
}

Das Optionsobjekt mit Standardwerten (indent = 2, safe = true) bedeutet, dass ein bloßer Aufruf formatJSON(data) das Vernünftige tut: 2 Leerzeichen, zirkulär-sichere Ausgabe.

Schritt 2: Einen Replacer schreiben, der die nicht unterstützten Typen behandelt#

Fügen Sie einen Replacer hinzu, der einen Platzhalter für wiederholte Objekte zurückgibt und BigInt in einen String umwandelt, damit es keinen Fehler wirft. Dies ist dieselbe Korrektur für zirkuläre Referenzen wie zuvor, plus der BigInt-Schutz.

const replacer = safe
  ? (key, val) => {
      if (typeof val === "object" && val !== null) {
        if (seen.has(val)) return "[Circular]";
        seen.add(val);
      }
      if (typeof val === "bigint") return val.toString();
      return val;
    }
  : null;

Wenn safe auf false gesetzt ist, ist der Replacer null, sodass Sie das normale JSON.stringify-Verhalten erhalten, für Fälle, in denen Sie wissen, dass die Daten sauber sind und maximale Geschwindigkeit wünschen.

Schritt 3: Stringify in einem try/catch, damit es nie einen Fehler wirft#

Wickeln Sie den JSON.stringify-Aufruf ein, sodass jeder verbleibende Serialisierungsfehler eine lesbare Nachricht zurückgibt, anstatt Ihren Logging- oder Rendering-Pfad zum Absturz zu bringen.

  try {
    return JSON.stringify(value, replacer, indent);
  } catch (err) {
    return `// Konnte nicht formatieren: ${err.message}`;
  }
}

Schritt 4: Rufen Sie es mit der benötigten Einrückung auf#

Derselbe Helfer deckt jetzt alle Formatierungsmodi über die Option indent ab.

formatJSON(someApiResponse);             // 2 Leerzeichen, sicher
formatJSON(config, { indent: "\t" });    // tab-eingerückt
formatJSON(payload, { indent: 0 });      // minimiert

Legen Sie dies in eine Utils-Datei und Sie haben hübsches Drucken, Minimierung, Tab-Einrückung sowie die Fallen für zirkuläre Referenzen und BigInt an einem Ort gelöst.

JSON in JavaScript formatieren: Die Kurzversion#

Um JSON in JavaScript zu formatieren, greifen Sie zuerst zu JSON.stringify(value, null, 2). In neun von zehn Fällen ist es das richtige Werkzeug. Denken Sie an die drei Dinge, die Tutorials auslassen: Ein replacer-Array ist eine saubere Whitelist zum Entfernen sensibler Felder, ein seen-set-Replacer behebt den zirkulären TypeError, und mehrere Werttypen (Funktionen, undefined, BigInt, NaN) werden entfernt oder werfen einen Fehler, anstatt serialisiert zu werden.

Wenn das JSON in Ihrer Zwischenablage und nicht im Code liegt, überspringen Sie das Skript und fügen Sie es in einen JSON-Formatter und Validator ein, um sofort hübsch gedruckt, validiert und mit einem Klick minimiert zu werden. Passen Sie Ihre Einrückung (normalerweise 2 Leerzeichen) an Ihr Ökosystem an, halten Sie den wiederverwendbaren Helfer bereit, und Sie werden nie wieder mit unlesbarem JSON kämpfen.

Häufig gestellte Fragen#

Wie kann ich JSON in JavaScript hübsch formatieren? Verwenden Sie JSON.stringify(value, null, 2). Das dritte Argument ist der space-Parameter: mit 2 wird jede Verschachtelungsebene mit zwei Leerzeichen eingerückt, was eine lesbare Ausgabe erzeugt. Übergeben Sie 4 für vier Leerzeichen oder "\t" für Tabulator-Einrückung.

Was bewirkt das dritte Argument von JSON.stringify? Das dritte Argument ist space, das die Einrückung steuert. Eine Zahl von 1 bis 10 rückt pro Ebene um so viele Leerzeichen ein, und ein String verwendet diesen String als Einrückung (nur die ersten 10 Zeichen zählen). Wenn Sie es weglassen oder 0 oder null übergeben, wird eine kompakte einzeilige Ausgabe ohne Formatierung erzeugt.

Warum wirft JSON.stringify "Converting circular structure to JSON"? Weil ein Objekt sich selbst direkt oder über eine Kette referenziert und JSON keine Möglichkeit hat, diese Schleife darzustellen. Beheben Sie es mit einer Ersetzungsfunktion, die bereits gesehene Objekte in einem WeakSet verfolgt und für Wiederholungen einen Platzhalter wie "[Circular]" zurückgibt, anstatt die Engine endlos rekursieren zu lassen.

Wie minifiziere ich JSON in JavaScript? Rufen Sie JSON.stringify(value) ohne space-Argument auf oder übergeben Sie 0. Um einen vorhandenen formatierten String zu minifizieren, führen Sie JSON.stringify(JSON.parse(prettyString)) aus, das ihn zurück in ein Objekt parst und ohne Leerzeichen neu ausgibt.

Warum verschwinden manche Eigenschaften, wenn ich ein Objekt stringifiziere? JSON.stringify lässt Funktionen, undefined-Werte und Symbol-Schlüssel in Objekten stillschweigend weg und wandelt NaN und Infinity in null um. BigInt-Werte werfen direkt einen TypeError. Wenn ein Feld in Ihrer Ausgabe fehlt, handelt es sich fast immer um einen dieser nicht unterstützten Typen.

Sollte ich 2 oder 4 Leerzeichen zum Formatieren von JSON verwenden? Passen Sie sich Ihrem Ökosystem an. JavaScript und Node verwenden standardmäßig 2 Leerzeichen (Prettier, npm, tsconfig.json), während Python-Tools oft 4 verwenden. Wenn Ihr Projekt beim Commit einen Formatierer ausführt, verwenden Sie das, was dieser erzwingt, damit Sie nicht gegen den Auto-Formatierer kämpfen. Bei Unsicherheit sind 2 Leerzeichen die sicherste Standardeinstellung.