JSON-Baumansicht
JSON in einer einklappbaren Baumansicht erkunden und bearbeiten
JSON-Eingabe
JSON-Dateien bis 25 MiB
Reparaturen können fehlerhafte Daten verändern. Prüfen Sie die bearbeitete Eingabe vor dem Export.
Parserdetails
JSON-Ansicht
Geben Sie gültiges JSON ein, um seine Struktur anzuzeigen.
Der Baum zeigt eine Seite mit sichtbaren Knoten. Alle Daten bleiben im Baum und in vollständigen Exporten verfügbar.
Geben Sie gültiges JSON ein, um seine Struktur anzuzeigen.
JSON-Statistik
- Objektschlüssel
- 0
- Werte insgesamt
- 0
- Objekte
- 0
- Arrays
- 0
- Zeichenfolgen
- 0
- Zahlen
- 0
- Boolesche Werte
- 0
- Nullwerte
- 0
- Maximale Tiefe
- 0
- UTF-8-Bytes
- 0
Verwendung der Ansicht
Geben Sie JSON ein, um den Typ zu ändern, oder einfachen Text, um eine Zeichenfolge zu speichern. Enter speichert; Escape bricht ab.
- Laden Sie eine Datei oder ein Beispiel, um den Baum zu öffnen und den Eingabebereich einzuklappen. Verwenden Sie „Eingabe anzeigen“, um das ursprüngliche JSON zu bearbeiten.
- Beim Tippen bleibt die Eingabe geöffnet. Formatieren und Minimieren ändern die Eingabe, ohne die geparsten Daten zu verlieren.
- Im Baummodus verwendet „Kopieren“ formatiertes JSON. Im Codemodus behält „Kopieren“ die Eingabeformatierung bei; die Codevorschau und Downloads verwenden formatiertes JSON.
- Schlüssel mit Punkten, Anführungszeichen oder dem Namen root werden als wörtliche Schlüssel behandelt.
- Bearbeiten Sie primitive Werte mit dem Stift; Löschen erfordert eine Bestätigung. Bearbeiten Sie Objekte und Arrays über die ursprüngliche Eingabe.
- Die Suche findet Schlüssel und Zeichenfolgenwerte, einschließlich Zeichenfolgen in Arrays. Wählen Sie einen Treffer, um seinen genauen Ort anzuzeigen.
- Zahlen verwenden die numerische Genauigkeit von JavaScript.
Kostenlose JSON-Baumansicht online, Validator & Editor
Unsere JSON-Baumansicht verwandelt rohe JSON-Daten in eine interaktive, einklappbare Baumstruktur, in der sich selbst tief verschachtelte Objekte leicht erkunden lassen. Fügen Sie einen JSON-String ein, laden Sie eine .json-Datei hoch oder ziehen Sie eine per Drag and drop auf die Seite, und das Tool validiert, parst und rendert Ihre Daten sofort in einer navigierbaren Hierarchie mit farbigen Typen für Strings, Zahlen, Booleans und null-Werte.
Über die Visualisierung hinaus ist das Tool auch ein schlanker JSON-Editor. Fahren Sie mit der Maus über einen beliebigen primitiven Wert im Baum, um Schaltflächen zum Bearbeiten und Löschen einzublenden, und ändern Sie Daten direkt, ohne zu einem separaten Editor zu wechseln. Änderungen wirken sich sofort auf das zugrunde liegende JSON aus, das Sie anschließend kopieren oder herunterladen können. Der integrierte JSON-Validator hebt Syntaxfehler in Echtzeit hervor, und die automatische Korrektur behebt häufige Fehler wie Schlüssel ohne Anführungszeichen, einfache Anführungszeichen und überzählige Kommas am Ende.
Eine leistungsstarke Suchfunktion findet Schlüssel und Werte in der gesamten Struktur, und der Statistikbereich schlüsselt die Gesamtzahl der Schlüssel, Objekte, Arrays, Strings, Zahlen, Booleans und null-Werte sowie die maximale Tiefe und die Größe in Byte auf. Ob Sie eine API-Antwort debuggen, eine Konfigurationsdatei prüfen oder einen Datenbankexport analysieren: Dieser JSON-Viewer online hält Ihren Workflow schnell und Ihre Daten privat, denn alles läuft in Ihrem Browser, ohne Upload auf einen Server.
Hauptfunktionen
- Interaktive Baumansicht mit Steuerelementen zum Erweitern, Einklappen, Alles erweitern und Alles einklappen
- JSON-Validierung in Echtzeit mit aussagekräftigen Fehlermeldungen
- Automatische Korrektur häufiger JSON-Fehler: Schlüssel ohne Anführungszeichen, einfache Anführungszeichen, überzählige Kommas am Ende und undefined-Werte
- Werte direkt in der Baumansicht bearbeiten und löschen
- Suche nach Schlüsseln und Werten mit hervorgehobenen Treffern und Pfadanzeige
- JSON-Statistikbereich: Gesamtzahl der Schlüssel, Objekte, Arrays, Strings, Zahlen, Booleans, null-Werte, maximale Tiefe und Größe
- Umschalter zum Formatieren (Pretty-Print) und Minimieren der rohen JSON-Eingabe
- Datei-Upload, Drag and drop, Kopieren in die Zwischenablage und Download als .json
- Umschalten zwischen Baumansicht und Codeansicht
- Einklappbarer Eingabebereich für maximalen Platz in der Baumansicht
So verwenden Sie die JSON-Baumansicht
- JSON laden: Fügen Sie JSON in das Eingabefeld ein, klicken Sie auf „Hochladen“, um eine .json-Datei auszuwählen, ziehen Sie eine Datei auf die Eingabezone oder klicken Sie für eine Demo auf „Beispiel laden“.
- Validieren und parsen: Das Tool validiert Ihr JSON in Echtzeit. Werden Fehler erkannt, klicken Sie auf „JSON-Fehler beheben“, um häufige Probleme automatisch zu korrigieren.
- Den Baum erkunden: Klicken Sie auf Knoten, um sie zu erweitern oder einzuklappen. Mit „Alle erweitern“ und „Alle einklappen“ navigieren Sie gesammelt.
- Nach Daten suchen: Geben Sie einen Schlüsselnamen oder Wert in die Suchleiste ein, um passende Einträge mit ihrem vollständigen Pfad zu finden.
- Werte bearbeiten oder löschen: Verwenden Sie die Steuerelemente zum Bearbeiten oder Löschen neben einem primitiven Wert. Diese Steuerelemente bleiben auch auf Touchscreens verfügbar; das Löschen erfordert eine Bestätigung.
- Daten exportieren: Klicken Sie auf „Kopieren“, um das JSON in die Zwischenablage zu legen, oder auf „Herunterladen“, um es als .json-Datei zu speichern.
Anwendungsfälle
- Debugging von API-Antworten: Fügen Sie eine REST- oder GraphQL-Antwort ein, um ihre Struktur zu visualisieren und bestimmte Felder schnell zu finden.
- Prüfung von Konfigurationsdateien: Laden Sie eine package.json, tsconfig.json oder eine beliebige Konfigurationsdatei hoch, um Struktur und Werte zu überprüfen.
- Analyse von Datenstrukturen: Nutzen Sie den Statistikbereich, um die Komplexität einer JSON-Nutzlast zu erfassen: wie tief sie verschachtelt ist, wie viele Schlüssel sie hat und wie groß sie in Byte ist.
- Schnelles Bearbeiten von JSON: Nehmen Sie kleine Korrekturen an JSON-Daten vor, ohne eine vollständige IDE oder einen Texteditor zu öffnen.
- Fehlerkorrektur: Reparieren Sie fehlerhaftes JSON aus Logs oder Drittquellen mit der automatischen Korrektur, bevor Sie es in Ihrer Anwendung verarbeiten.
- Prüfung von Datenbankexporten: Sehen Sie sich JSON-Exporte aus MongoDB, Firebase oder anderen Dokumentendatenbanken in lesbarer Form an.
- Lehre und Lernen: Veranschaulichen Sie verschachtelte Datenstrukturen für Studierende, die etwas über JSON, APIs und Datenmodellierung lernen.
Häufig gestellte Fragen
Ist dieses Tool kostenlos?
Ja, die JSON-Baumansicht ist völlig kostenlos, ohne Anmeldung, ohne Werbesperren und ohne Nutzungsgrenzen. Sie können JSON beliebig oft ansehen, validieren, bearbeiten und exportieren.
Sind meine Daten sicher?
Ja. Das gesamte Parsen, Validieren, Bearbeiten und Suchen findet vollständig in Ihrem Browser statt. Es werden niemals Daten an einen entfernten Server gesendet, sodass Sie das Tool auch mit proprietären, internen oder sensiblen JSON-Daten sicher nutzen können.
Welche JSON-Fehler kann die automatische Korrektur beheben?
Die Reparaturfunktion versucht die ursprünglichen Korrekturen für Schlüssel ohne Anführungszeichen, einfache Anführungszeichen, überzählige Kommas am Ende und undefined-Werte. Die versuchte Eingabe bleibt zur Prüfung sichtbar. Reparaturen können fehlerhafte Daten verändern und garantieren nicht die beabsichtigte Bedeutung; bereits gültiges JSON bleibt unverändert.
Gibt es eine Größenbeschränkung für JSON-Dateien?
Uploads und abgelegte Dateien werden bis zu 25 MiB akzeptiert, auch eine Datei, die genau am Limit liegt. Die Ansicht lädt die sichtbaren Baumknoten seitenweise und behält die vollständigen Daten für Bearbeitung und Export. Sehr große oder sehr tief verschachtelte JSON-Dateien können dennoch mehr Zeit oder Speicher benötigen.
Kann ich verschachtelte Objekte oder Arrays im Baum bearbeiten?
Derzeit sind das direkte Bearbeiten und Löschen für primitive Werte (Strings, Zahlen, Booleans und null-Werte) möglich. Um verschachtelte Objekte oder Arrays zu ändern, wechseln Sie zum Eingabebereich und bearbeiten das rohe JSON direkt.
Tipps und bewährte Vorgehensweisen
- Vor dem Erkunden formatieren: Klicken Sie auf „JSON formatieren“, um die Eingabe per Pretty-Print aufzubereiten. So lässt sich der Rohtext neben der Baumansicht leichter lesen.
- Eingabebereich einklappen: Blenden Sie den Eingabebereich nach dem Laden des JSON aus, damit der Baum bei tiefen Hierarchien den größtmöglichen Platz auf dem Bildschirm hat.
- Bei großen Dateien die Suche nutzen: Statt Knoten in einem großen JSON von Hand zu erweitern, geben Sie einen Schlüssel oder Wert in die Suchleiste ein und springen direkt zu den Treffern.
- Statistiken für schnelle Prüfungen nutzen: Mit „Statistik anzeigen“ erhalten Sie einen schnellen Überblick über die Komplexität der Daten, bevor Sie sich einzelnen Knoten widmen.
- Drag and drop für mehr Komfort: Ziehen Sie eine .json-Datei direkt aus Ihrem Dateimanager auf den Eingabebereich, um Daten am schnellsten zu laden.
- Nach Änderungen herunterladen: Klicken Sie nach direkten Änderungen auf „Herunterladen“, um das geänderte JSON als neue Datei zu speichern, statt das Original zu überschreiben.