JSON in HTML-Tabelle umwandeln

So funktioniert es

Fügen Sie Ihr JSON links ein; rechts entsteht sofort der HTML-Tabellencode. Ein Array aus Objekten (Datensätze in geschweiften Klammern innerhalb eckiger Klammern) wird Zeile für Zeile zur Tabelle: Die Spaltenköpfe sind die Vereinigung der Schlüssel aller Datensätze, ein fehlendes Feld bleibt eine leere Zelle. Ein einzelnes Objekt ergibt eine zweispaltige Tabelle "Feld / Wert". Das Beispiel enthält zwei Personen; bei der zweiten fehlt die Postleitzahl, dafür gibt es ein Feld "notiz". Mit "Abflachen" wird das Adress-Objekt in die Spalten adresse.ort und adresse.plz zerlegt, das Ergebnis hat 2 Zeilen und 5 Spalten, und die Postleitzahl 04109 behält ihre führende Null. Mit "Innere Tabelle" wird in der Adresszelle eine kleine Tabelle gezeichnet. Einfache Listen wie [1, 2, 3] erscheinen als "1, 2, 3". Text wie "Preis < 100 & auf Lager" wird mit &lt; und &amp; maskiert; er sieht auf der Seite gleich aus, wird aber nicht als Tag gelesen. Den Code fügen Sie in WordPress in einen Block "Individuelles HTML" oder in die Quelltextansicht Ihrer E-Mail-Vorlage ein.

Dieses Werkzeug ist auch als json in html umwandeln, json in html tabelle, json als tabelle anzeigen, json tabelle erstellen, json to html, json to html table bekannt.

Was ist JSON?

JSON (JavaScript Object Notation) ist ein verbreitetes Format, um Daten als Text zu übertragen. Geschweifte Klammern {} enthalten ein Objekt aus Schlüssel-Wert-Paaren, eckige Klammern [] eine geordnete Liste; Werte können Text, Zahlen, true/false, null oder wieder Objekte und Listen sein. Die meisten Webdienste und Apps senden ihre Daten als JSON. JSON ist lesbarer Text, hat aber kein sichtbares Layout wie eine Tabelle; um es auf einer Seite zu zeigen, wird es in HTML umgewandelt.

Was ist Abflachen (Flattening)?

Abflachen fasst jeden Wert einer verschachtelten Struktur unter einem einstufigen Schlüssel zusammen. Der Pfad entsteht, indem die Schlüssel mit Punkten verbunden werden: Aus {"adresse": {"ort": "Leipzig"}} wird adresse.ort = Leipzig. So passen verschachtelte Daten in eine Tabelle aus Zeilen und Spalten. Abflachen verliert keine Information, vervielfacht aber bei sehr tiefen oder feldreichen Strukturen schnell die Spaltenzahl; dann ist eine innere Tabelle übersichtlicher.

Was unterscheidet JSON zu CSV von JSON zu HTML-Tabelle?

Beide ordnen JSON-Datensätze in Zeilen und Spalten, doch das Ergebnis geht an verschiedene Orte. CSV ist reine Daten; es soll in Excel geöffnet oder in ein anderes Programm importiert werden und trägt kein Layout. Eine HTML-Tabelle ist Code aus Tags; sie wird direkt auf einer Webseite, in einem Blogbeitrag oder in einer HTML-E-Mail angezeigt und kann Kopfzellen und innere Tabellen enthalten. Wollen Sie mit den Daten arbeiten, nehmen Sie CSV, wollen Sie sie zeigen, die HTML-Tabelle.

Abflachen oder innere Tabelle

Beim Abflachen wird jedes Feld eines verschachtelten Objekts zu einer eigenen Spalte, verbunden mit Punkten: {"adresse": {"ort": "Leipzig"}} schreibt Leipzig in die Spalte adresse.ort. Die Tabelle bleibt einstufig, lässt sich nach Spalten sortieren, und beim Kopieren nach Excel landen die Zellen an der richtigen Stelle. Meist ist das die richtige Wahl.

Die innere Tabelle behält die Verschachtelung bei: In der Adresszelle entsteht eine kleine Tabelle mit den Zeilen ort und plz. Tragen Datensätze unterschiedlich tiefe oder feldreiche Unterobjekte (etwa eine Artikelliste in einer Bestellung), bleibt die innere Tabelle lesbar, wo das Abflachen Dutzende Spalten erzeugen würde. In diesem Modus werden auch Arrays aus Objekten zu inneren Tabellen.

• {"adresse": {"ort": "Leipzig"}} → Abflachen: Spalte adresse.ort
• [{"a":1},{"b":2}] → Spalten a und b, Lücken bleiben leer
• "<b>neu</b>" → &lt;b&gt;neu&lt;/b&gt; (wird nicht fett)

Maskierung: warum JSON-Text nicht ungeprüft auf die Seite kommt

JSON-Daten stammen oft aus einer API oder aus einem Formular, das Nutzer ausfüllen. Steht in einem Feld etwas wie <script> oder <img onerror=...> und gelangt das unmaskiert auf die Seite, kann im Browser der Besucher Code laufen; das nennt man Cross-Site-Scripting (XSS). Dieses Werkzeug maskiert jeden Schlüssel und jeden Wert mit der Bibliothek he: <, >, &, Anführungszeichen und Apostroph werden zu Entitäten.

Maskierter Text sieht auf der Seite genauso aus; verloren geht nur die Möglichkeit, dass er als Code gelesen wird. Um die Tabelle zu gestalten, lassen Sie den Code, wie er ist, und schreiben CSS-Regeln für table, th und td in Ihrer Website; bei einem fertigen Theme übernimmt die Tabelle ohnehin dessen Aussehen.

Häufige Fragen

Wie wandle ich JSON in eine HTML-Tabelle um?

Fügen Sie das JSON links ein. Bei einem Array aus Objekten wird jedes Objekt eine Zeile und jeder Schlüssel eine Spalte; ein einzelnes Objekt ergibt eine Tabelle Feld/Wert. Kopieren Sie den Code rechts in den HTML-Editor Ihrer Seite.

Was passiert, wenn Datensätze unterschiedliche Felder haben?

Die Spalten sind die Vereinigung der Schlüssel aller Datensätze, in der Reihenfolge ihres ersten Auftretens. Ein fehlendes Feld bekommt eine leere Zelle; kein Wert verrutscht oder landet unter der falschen Spalte.

Wie sieht verschachteltes JSON in der Tabelle aus?

Steht "Verschachtelte Objekte" auf "Abflachen", entstehen Spaltennamen mit Punkt wie adresse.ort. Mit "Innere Tabelle" werden verschachtelte Objekte und Listen von Objekten in eine eigene kleine Tabelle innerhalb der Zelle geschrieben.

Werden die eingefügten Daten irgendwohin gesendet?

Nein. Die Umwandlung läuft vollständig in Ihrem Browser; auch eine Kundenliste oder eine API-Antwort verlässt diese Seite nicht.