JSON zu HTML-Tabelle

Ähnliche Tools

Über JSON zu HTML und HTML-Tabellen

Anwendungsfälle

• Frontend-Entwicklung: JSON-Antworten von APIs schnell in HTML-Tabellen rendern und in Admin-Dashboards oder Dokumentationsseiten einbetten
• Tailwind- oder Bootstrap-Projekte: Tailwind- bzw. Bootstrap-Klassen direkt in das Feld „table class name“ eintragen und nahtlos mit dem bestehenden Designsystem verbinden
• Responsive Webseiten: Horizontaler Scroll-Wrapper ist standardmäßig aktiv, sodass mobile Tabellen das Layout nicht zerschießen
• Datenvisualisierung: Formatierte Tabellen direkt in Blogs, Dokumentationen, Confluence oder Notion einbetten, wo HTML unterstützt wird
• Report-Erstellung: Backend-exportierte JSON-Daten schnell in HTML-E-Mail-Reports für Stakeholder verwandeln
• Frontend-Prototyping: Mit echten Daten Tabellenlayouts prüfen, um vor der Übergabe mit Produkt und Design abzustimmen
• CMS-Integration: Statische HTML-Tabellen-Snippets für WordPress, Drupal und andere CMS erstellen und so die Komplexität der Template-Engines umgehen
• Tests und Debugging: In der Browser-Konsole `JSON.stringify` einsetzen, die Ausgabe hier einfügen und komplexe verschachtelte Daten schnell als 2D-Tabelle prüfen
• E-Mail-Vorlagen: Tabellen-HTML in HTML-Mails einbetten (Outlook und Co. benötigen ggf. zusätzliche Tests zur Kompatibilität)
• API-Dokumentation: HTML-Tabellen in Markdown-, Swagger- oder Redoc-Dokumenten einsetzen, um die Standard-JSON-Beispiele zu ersetzen
• Lehre und Unterricht: Verschachtelte JSON-Hausaufgaben von Studierenden in eine einheitliche Tabelle flatten und gemeinsam korrigieren
• Datenbereinigungs-Reports: Verschachtelte Datenbank-Exporte im Flatten-Modus in eine Tabelle überführen und Felder bequem vergleichen

Anleitung

1. JSON-Array (empfohlen) oder ein einzelnes Objekt links in den Editor einfügen, alternativ „Sample“ klicken, um die drei Produktbeispiele zu laden, oder „Upload“ zum Hochladen einer .json- bzw. .txt-Datei
2. In der Toolbar den Verschachtelungsmodus wählen (empfohlen: „Abflachen“) – verschachtelte Objekte werden automatisch zu Punkt-getrennten Schlüsseln wie `user.name`
3. Auf „Convert“ klicken (oder einfach Enter drücken), um die Konvertierung zu starten; ein 500-ms-Debounce schützt vor Flattereingaben
4. Im Code-Tab rechts den HTML-Code mit Syntax-Highlighting ansehen und im Preview-Tab die Tabelle in der iframe live rendern
5. In der Toolbar Stiloptionen aktivieren (Zebrastreifen / Rahmen / Hover / Kompakt / Responsiv), eigene Tabellen-Klassen setzen und den Null-Platzhalter konfigurieren – die Vorschau aktualisiert sich automatisch
6. Bei Bedarf auf „Copy“ klicken, um den HTML-Code zu kopieren, oder auf „Download“ für table.html; mit „Reset“ stellst du alle Optionen wieder auf den Standard zurück

Funktionen

• Automatisches Abflachen verschachtelter Objekte: `{user:{name,age}}` wird rekursiv zu den Punkt-getrennten Schlüsseln `user.name`, `user.age` usw. expandiert (Trennzeichen konfigurierbar) – kein eigenes Flatten-Skript nötig
• Drei Verschachtelungsmodi: Abflachen (Empfohlen, automatische Expansion bis 6 Ebenen) / Schlüssel der ersten Ebene (verschachtelte Objekte bleiben als eigene Spalte) / Als Zeichenkette (verschachtelte Objekte werden als JSON-String angezeigt)
• CSS-Klassen-Hook: Beliebige Klassenzeichenketten werden in `<table>` und optional in den umschließenden `<div>` injiziert – nahtlose Integration mit Tailwind, Bootstrap, Bulma und anderen CSS-Frameworks
• Responsiver horizontaler Scroll: Standardmäßig wird die Tabelle in einen Container mit `overflow-x:auto` eingebettet, sodass auf schmalen Bildschirmen automatisch eine horizontale Scrollleiste erscheint, ohne das Seitenlayout zu sprengen
• 6 Visualisierungs-Optionen: Zebrastreifen, Rahmen, Zeilen-Hover, Kompaktmodus, Indexspalte (#) und Tabellen-Caption – alle Checkboxen wirken sofort
• Duale Vorschau mit Code- und iframe-Tab: Code-Tab zeigt HTML-Quelltext mit Syntax-Highlighting, Preview-Tab rendert die Tabelle live in einer sandboxed iframe
• Typbasierte Hervorhebung: null wird grau-kursiv dargestellt (Platzhaltertext anpassbar), Booleans true/false erscheinen grün/rot, Zahlen blau, verschachtelte Objekte zeigen beim Hovern das vollständige JSON
• Zeilenlimit-Schutz: Standardobergrenze 1000 Zeilen (1–10000 einstellbar), Überschreitungen werden automatisch abgeschnitten und mit „Abgeschnitten“-Hinweis versehen, um Browser-Ruckler bei riesigen DOMs zu vermeiden
• Live-Generierungsstatistik: Das rechte Panel zeigt „X Zeilen × Y Spalten generiert“ sowie ein Truncated-Badge – bei großen JSON-Daten siehst du die Dimension auf einen Blick
• Kopieren und Herunterladen mit einem Klick: Im Code-Modus kannst du den HTML-Code in die Zwischenablage kopieren oder als table.html-Datei herunterladen, um sie direkt auf deiner Website einzubinden
• Beispieldaten und Datei-Upload: Drei integrierte Produktbeispiele (Laptop / Mouse / Desk Chair) lassen sich mit einem Klick laden, plus Drag-and-Drop-Upload für .json- und .txt-Dateien
• 14 konfigurierbare Optionen: Über die Reset-Schaltfläche in der Toolbar setzt du alle 14 Optionen gleichzeitig auf die Standardwerte zurück – ideal zum schnellen Ausprobieren
• Lokaler Verlauf: Die letzten 200 Eingaben werden im localStorage gespeichert und lassen sich nach einem Reload oder versehentlichen Schließen wiederherstellen
• Vollständig lokal im Browser: Parsen, Generieren, Kopieren und Herunterladen laufen komplett in deinem Browser – es werden keine Daten an einen Server übertragen

Codebeispiele

// 1) GitHub API aufrufen, um eine Benutzerliste zu holen
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) Flatten-Funktion (entspricht der Logik dieses Tools)
function flattenObject(obj, prefix = '', sep = '.', result = {}) {
  for (const [k, v] of Object.entries(obj || {})) {
    const key = prefix ? `${prefix}${sep}${k}` : k;
    if (v && typeof v === 'object' && !Array.isArray(v)) {
      flattenObject(v, key, sep, result);
    } else {
      result[key] = v;
    }
  }
  return result;
}

// 3) Abgeflachte Daten in HTML-Tabelle umwandeln, Tailwind-Klassen injizieren
function generateHtmlTable(rows) {
  const flat = rows.map(r => flattenObject(r));
  const cols = [...new Set(flat.flatMap(r => Object.keys(r)))];
  const thead = cols.map(c => `<th class="px-4 py-2 text-left">${c}</th>`).join('');
  const tbody = flat.map(r =>
    `<tr class="border-b hover:bg-gray-50">${cols.map(c => `<td class="px-4 py-2">${r[c] ?? 'N/A'}</td>`).join('')}</tr>`
  ).join('');
  return `<table class="min-w-full text-sm">
  <thead class="bg-gray-100"><tr>${thead}</tr></thead>
  <tbody>${tbody}</tbody>
</table>`;
}

// 4) In die Seite einhängen
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log('Generiert: ' + users.length + ' Zeilen, Spalten: ' + (Object.keys(flattenObject(users[0])).length));

from flask import Flask, jsonify, render_template_string
import json

app = Flask(__name__)

TEMPLATE = """
<!doctype html><html><body>
<div class="overflow-x-auto">{{ table_html | safe }}</div>
</body></html>
"""

def flatten(obj, prefix='', sep='.', result=None):
    """Verschachteltes Objekt rekursiv abflachen"""
    if result is None:
        result = {}
    for k, v in (obj or {}).items():
        key = f"{prefix}{sep}{k}" if prefix else k
        if isinstance(v, dict):
            flatten(v, key, sep, result)
        else:
            result[key] = v
    return result

def json_to_html_table(data, table_class='min-w-full border-collapse',
                        max_rows=1000, responsive=True):
    if isinstance(data, dict):
        data = [data]
    if not data:
        return "<p>Keine Daten</p>"

    # Zeilenlimit
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # Jede Zeile abflachen
    flat_rows = [flatten(row) for row in data]

    # Alle Spaltennamen sammeln (per Set deduplizieren, Reihenfolge beibehalten)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

    # Kopfzeile erzeugen
    thead = "".join(f'<th class="px-4 py-2 text-left bg-gray-100">{c}</th>' for c in columns)

    # Tabellenzeilen erzeugen
    rows = []
    for i, row in enumerate(flat_rows):
        bg = "bg-gray-50" if i % 2 == 1 else ""
        tds = "".join(
            f'<td class="px-4 py-2 {bg}">{("N/A" if row.get(c) is None else row.get(c, ""))}</td>'
            for c in columns
        )
        rows.append(f'<tr class="hover:bg-blue-50">{tds}</tr>')

    html = f'<table class="{table_class}"><thead><tr>{thead}</tr></thead><tbody>{"".join(rows)}</tbody></table>'
    if responsive:
        html = f'<div class="overflow-x-auto">{html}</div>'

    if truncated:
        html = f'<p class="text-amber-600 text-sm">Daten auf die ersten {max_rows} Zeilen gekürzt</p>{html}'

    return html


@app.route('/api/users')
def users():
    data = json.load(open('users.json'))
    return jsonify(data)

@app.route('/users.html')
def users_html():
    import requests
    data = requests.get('http://localhost:5000/api/users').json()
    return render_template_string(TEMPLATE, table_html=json_to_html_table(data))


if __name__ == '__main__':
    app.run(debug=True)

# 1) Verschachtelte Logs mit jq aggregrieren und zu Punkt-Schlüsseln abflachen
cat app.log | jq -s '
  group_by(.response.status_code) |
  map({
    status: .[0].response.status_code,
    count: length,
    "first_request.method": .[0].request.method,
    "last_request.url": .[-1].request.url,
    "first_seen": min_by(.timestamp).timestamp,
    "last_seen": max_by(.timestamp).timestamp
  })
' > stats.json

# 2) stats.json in dieses Tool einfügen
#    In der Toolbar den Modus „Abflachen (Empfohlen)" wählen
#    „Zebrastreifen + Responsiv + Rahmen" aktivieren
#    In „table class name" eintragen: min-w-full text-sm border-collapse
#    Null-Platzhalter setzen: - (fehlende Felder zeigen -)
#    Caption setzen: 2026-07 Produktions-Fehlerlog-Statistik
#    Convert klicken und table.html herunterladen

# 3) Auf S3/OSS als statische Seite hochladen
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# Oder in Confluence / Notion / VuePress-Dokumentation einbetten
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# Oder als HTML-E-Mail versenden
mutt -e "set content_type=text/html" -s "2026-07 Fehlerlog" your@email.com < table.html

Häufig gestellte Fragen

Fehlerbehebung

Glossar

HTML-Tabelle (HTML Table)

W3C-standardisiertes Element zur strukturierten Datenanzeige, bestehend aus table, thead, tbody, tr, th, td und caption. Der generierte Code folgt strikt dieser Struktur.

JSON-Array

Eine mit eckigen Klammern […] umschlossene Sammlung von Objekten. Jedes Objekt wird zu einer Tabellenzeile; ein leeres Array erzeugt keine Tabelle (Hinweistext erscheint).

JSON-Objekt

Eine mit geschweiften Klammern {} umschlossene Sammlung von Schlüssel-Wert-Paaren. Jeder Schlüssel wird zur Spaltenüberschrift, jeder Wert zur Zelle; ein einzelnes Objekt wird automatisch in eine einzeilige Tabelle verpackt.

Verschachtelung abflachen (Flatten)

Rekursive Expansion verschachtelter Objekte zu Punkt-getrennten Schlüsseln, z. B. {user:{name:'A'}} → 'user.name'. Das Tool unterstützt automatisches Abflachen bis 6 Ebenen, das Trennzeichen ist konfigurierbar.

thead / tbody

Zwei semantische Bereiche der HTML-Tabelle: thead umschließt die Kopfzeile (th), tbody die Datenzeilen (td). Der generierte Code trennt beide Bereiche konsequent.

Caption

Tag für die Tabellenüberschrift, das innerhalb der Tabelle ganz oben steht. Das Tool unterstützt einen individuellen Caption-Text; aktiviert erscheint die Überschrift über der Tabelle und verbessert SEO sowie Barrierefreiheit.

Zebrastreifen (Zebra Striping)

Visuelles Muster, bei dem gerade und ungerade Zeilen abwechselnd unterschiedliche Hintergrundfarben erhalten, häufig #fff und #f9fafb. Wird im Tool über die Checkbox „Zebrastreifen“ aktiviert und verbessert die Lesbarkeit langer Tabellen deutlich.

Inline-Style

CSS-Direktformatierung über das style-Attribut eines HTML-Tags, anstatt über externe Stylesheets. Das Tool gibt standardmäßig alle Stile als Inline-Style aus – du kannst den Code sofort übernehmen, ohne weitere CSS-Dateien.

CSS-Klassen-Hook

Differenzierende Fähigkeit dieses Tools: beliebige Klassenzeichenketten (z. B. Tailwind-Klassen) werden direkt in das `<table>`-Tag injiziert, sodass eine nahtlose Integration in bestehende CSS-Frameworks möglich ist. Ein zentrales Upgrade gegenüber Mitbewerbern.

iframe sandbox

Sicherer Sandkasten-Modus des iframe-Tags, mit dem sich Skriptausführung, Formularübermittlung und Co. einschränken lassen. Das Tool nutzt eine iframe mit `sandbox="allow-same-origin"`, um die generierte HTML-Vorschau gefahrlos anzuzeigen.

Typbasierte Hervorhebung (type-aware)

Differenzierende Fähigkeit dieses Tools: Je nach JavaScript-Typ des Zellenwerts (null, boolean, number, object, string) werden unterschiedliche Farben angewendet, was das Debuggen von API-Daten erleichtert.

localStorage-Verlauf

Lokaler Schlüssel-Wert-Speicher des Browsers (ca. 5–10 MB). Das Tool speichert die letzten 200 Eingaben persistent im localStorage, sodass sie nach einem Reload oder versehentlichen Schließen wiederhergestellt werden können.

Responsiver Wrapper

Umschließt die Tabelle mit `<div style="overflow-x:auto;max-width:100%">`, sodass auf schmalen Bildschirmen automatisch eine horizontale Scrollleiste erscheint. Standardmäßig aktiv, in der Toolbar deaktivierbar.

Debounce

Frontend-Leistungsoptimierung: Häufig ausgelöste Events (z. B. Eingaben) werden zusammengefasst und nur einmal nach einer kurzen Pause ausgeführt. Das Tool nutzt 500-ms-Debounce, um Ruckler beim Parsen großer Dateien zu vermeiden.

W3C HTML5

Vom World Wide Web Consortium (W3C) verabschiedete HTML-Norm. Der generierte Code ist HTML5-konform und wird in allen modernen Browsern korrekt dargestellt.

Vergleichstabelle der drei Verschachtelungsmodi

Die Toolbar bietet drei Modi für unterschiedliche Verschachtelungsszenarien – wähle je nach Komplexität der JSON-Struktur:

Übersicht der 14 konfigurierbaren Toolbar-Optionen

Alle 14 konfigurierbaren Optionen der Toolbar mit ihren visuellen Auswirkungen im Überblick:

Übersicht der typbasierten Hervorhebung pro Zellentyp

Das Tool weist je nach JavaScript-Typ des JSON-Werts automatisch unterschiedliche Farben zu – so erkennst du Datentypen auf einen Blick:

Privacy & Security

Dieses JSON-zu-HTML-Tool führt sämtliche JSON-Analyse, Verschachtelungs-Flatten, HTML-Generierung sowie Kopier- und Download-Operationen vollständig lokal in deinem Browser per JavaScript aus. Weder die eingegebenen JSON-Daten noch der erzeugte HTML-Code werden an irgendeinen Server übertragen, in der Cloud gespeichert oder protokolliert. Auch JSON mit sensiblen API-Antworten oder internen Geschäftsfeldern lässt sich bedenkenlos verarbeiten – beim Schließen des Tabs werden alle Daten vollständig entfernt.

Authoritative References

• MDNMDN - HTML <table>-Element
• MDNMDN - HTML-Tabellen Grundlagen
• WHATWGWHATWG HTML Living Standard - table-Element
• MDNMDN - iframe sandbox-Attribut
• MDNMDN - JSON.parse / JSON.stringify
• TailwindTailwind CSS - Tabellenlayouts
• BootstrapBootstrap - Tabellen