Was ist ein JSON-Baumeditor?

JSON speichert Daten als Objekte, die benannte Werte enthalten, und als Arrays, die geordnete Listen enthalten. Da sie verschachtelt sein können, lässt sich ein großes Dokument in einem einfachen Texteditor nur schwer ändern: Ein fehlendes Komma oder eine fehlende geschweifte Klammer macht die gesamte Datei ungültig. Ein Baumeditor zeigt dieselben Daten als eine Gruppe von Knoten an, die Sie öffnen und schließen können. Sie ändern einen Wert, benennen einen Schlüssel um oder fügen einen Knoten direkt hinzu bzw. entfernen ihn, und das Tool kümmert sich um Kommas, Anführungszeichen und Klammern.

Toolbeschreibung

Mit diesem Tool können Sie JSON als Baum bearbeiten. Fügen Sie Ihr JSON ein, woraufhin es als Baum aus Objekten, Arrays und Werten angezeigt wird. Verwenden Sie den Stift neben einem Knoten, um seinen Schlüssel oder Wert zu ändern, das Plus neben einem Objekt oder Array, um ein untergeordnetes Element hinzuzufügen, und den Papierkorb, um einen Knoten zu entfernen. Jede Änderung wird sofort in den JSON-Text zurückgeschrieben, sodass Sie das Ergebnis kopieren können, sobald Sie fertig sind. Sie können weiterhin im Texteditor tippen, und der Baum wird entsprechend aktualisiert. Alles geschieht in Ihrem Browser, und Ihre Daten werden nirgendwohin gesendet.

Beispiele

Beginnen Sie mit diesem JSON:

{
  "name": "example-app",
  "port": 8080,
  "tags": ["json", "tree"]
}
JSON

Ändern Sie port in 3000, fügen Sie den String editor zu tags hinzu und fügen Sie einen neuen Schlüssel private mit dem Wert true hinzu. Der Text sieht dann so aus:

{
  "name": "example-app",
  "port": 3000,
  "tags": ["json", "tree", "editor"],
  "private": true
}
JSON

Funktionen

  • Schlüssel, Strings, Zahlen, boolesche Werte und Nullwerte direkt bearbeiten
  • Neue Schlüssel zu Objekten und neue Elemente zu Arrays hinzufügen sowie jeden Knoten außer der Wurzel entfernen
  • Den Typ eines Werts ändern, beispielsweise von einem String in eine Zahl
  • Die Reihenfolge der Schlüssel beibehalten und warnen, wenn ein Schlüssel bereits im selben Objekt verwendet wird
  • Den gesamten Baum auf- oder zuklappen und sehen, wie viele Knoten er enthält

Funktionsweise

Das Tool analysiert Ihren Text als JSON und zeigt das Ergebnis als Baum an. Wenn Sie eine Änderung vornehmen, erstellt es eine neue Kopie der Daten mit dieser Änderung und schreibt sie mit einer Einrückung von 2 Leerzeichen wieder als Text. Beim Umbenennen eines Schlüssels bleibt dessen Position zwischen seinen gleichgeordneten Elementen erhalten. Schlüssel, die wie ganze Zahlen aussehen, beispielsweise "1" oder "2", werden immer in aufsteigender Reihenfolge zuerst aufgelistet - wie in jedem JavaScript-JSON-Parser.

Ein Wert hat einen von sechs Typen: String, Zahl, boolescher Wert, Nullwert, Objekt oder Array. Neue Objekte und Arrays sind zunächst leer und werden über die Plus-Schaltfläche gefüllt. Ein Objekt oder Array, das bereits untergeordnete Elemente enthält, behält seinen Typ, sodass sein Inhalt nicht versehentlich verloren gehen kann. Sie können seinen Schlüssel jedoch weiterhin umbenennen.

Tipps

  • Drücken Sie die Eingabetaste, um eine Änderung zu speichern, und die Esc-Taste, um sie abzubrechen. In einem String drücken Sie Umschalt und die Eingabetaste, um einen Zeilenumbruch einzufügen
  • Wenn der Text auf der linken Seite kein gültiges JSON ist, bleibt der Baum leer und der Fehler wird angezeigt, bis Sie ihn beheben
  • Der Baum verfügt über keine Rückgängig-Funktion. Bewahren Sie daher eine Kopie Ihres ursprünglichen JSON auf, wenn Sie sich bei einer Änderung unsicher sind
  • Zahlen größer als 9007199254740991 verlieren an Genauigkeit, da JSON-Zahlen als JavaScript-Zahlen gelesen werden
  • Um JSON nur anzusehen, ohne es zu ändern, verwenden Sie den JSON-Baum-Viewer