JSON naar HTML-tabel

Gerelateerde aanbevelingen

Over JSON naar HTML en HTML-tabellen

Toepassingsgevallen

• Frontend-ontwikkeling: render JSON-data van API's snel als HTML-tabellen en embed ze in admin-dashboards of documentatiepagina's
• Tailwind- of Bootstrap-projecten: vul in 'table class naam' direct Tailwind- of Bootstrap-klassen in voor naadloze integratie met het bestaande stijlsysteem
• Responsieve webpagina's: standaard ingeschakelde horizontale scrollwikkel voorkomt dat mobiele tabellen de layout oprekken
• Datavisualisatie: plak opmaaktabellen in platforms die HTML-insluiting ondersteunen, zoals blogs, documentatie, Confluence en Notion
• Rapportgeneratie: zet backend-geëxporteerde JSON-data snel om in HTML-e-mailrapporten die je naar collega's kunt sturen
• Frontend-prototyping: gebruik echte data tijdens het ontwerp om tabelstijlen te previewen, zodat je vóór oplevering kunt afstemmen met product en design
• CMS-systemen: maak statische HTML-tabelfragmenten voor WordPress, Drupal en andere CMS'en om de complexiteit van template-engines te vermijden
• Testen en debuggen: gebruik JSON.stringify in de browserconsole en plak de uitvoer hier om de 2D-structuur van complexe geneste data snel te previewen
• E-mailtemplates: integreer tabel-HTML in HTML-e-mails (let op: test compatibiliteit met clients zoals Outlook)
• API-documentatie: embed HTML-tabellen in Markdown, Swagger of Redoc als alternatief voor standaard JSON-voorbeelden
• Onderwijs: zet geneste JSON-opdrachten van studenten in datastructuurvakken om naar uniforme tabellen voor gezamenlijke beoordeling
• Data-cleaningrapporten: zet geneste JSON uit database-exporten via de afvlakmodus om naar tabellen, handig voor het vergelijken van velden

Hoe te gebruiken

1. Plak een JSON-array (aanbevolen) of een enkel object in de editor aan de linkerkant, klik op 'Sample' om 3 productvoorbeelden te laden, of klik op 'Upload' om een .json- of .txt-bestand te uploaden
2. Kies de nestingsverwerkingsmodus op de werkbalk (aanbevolen: 'Afvlakken'); geneste objecten worden automatisch uitgevouwen tot punt-gescheiden sleutels zoals `user.name`
3. Klik op de knop 'Convert' (of druk op Enter) om de conversie te starten; tijdens het typen is er 500ms debounce-beveiliging
4. Bekijk de HTML-tabelcode met syntaxismarkering op het Code-tabblad aan de rechterkant, en de realtime iframe-rendering op het Preview-tabblad
5. Vink op de werkbalk de stijlopties aan (zebrastrepen / randen / hover / compact / responsief), vul een aangepaste table class in en stel de null-tijdelijke aanduiding in; de voorvertoning wordt direct bijgewerkt
6. Klik op 'Copy' om de HTML-code te kopiëren en in een webpagina te plakken, of klik op 'Download' om het bestand als table.html op te slaan; klik op Reset om opnieuw te beginnen

Functies

• Automatisch afvlakken van geneste objecten: vouwt `{user:{name,age}}` recursief uit naar punt-gescheiden sleutels zoals `user.name`, `user.age` (scheidingsteken configureerbaar), zonder zelf afvlakscripts te schrijven
• Drie modi voor nestingsverwerking: Afvlakken (Aanbevolen, diepte 6 lagen automatisch uitgevouwen) / Eerste-niveau sleutels (genest object als één kolom) / Als tekenreeks (genest object naar JSON-tekenreeks voor voorvertoning)
• Aangepaste CSS-klasse-haken: injecteert een aangepaste class-tekenreeks in `<table>` en de optionele buitenste `<div>`, naadloze integratie met stijlsystemen zoals Tailwind, Bootstrap en Bulma
• Responsieve horizontale scroll: standaard wordt een buitenste `overflow-x:auto`-container toegevoegd, zodat op smalle schermen automatisch een horizontale scrollbalk verschijnt en de paginalayout niet wordt vervormd
• 6 configureerbare visuele stijlen: zebrastrepen, randen, rij-highlight bij hover, compacte modus, index-eerste-kolom (#), tabel-Caption-titel, geregeld via werkbalk-checkboxen met directe werking
• Dubbele Code- en iframe-voorvertoningstabbladen: het Code-tabblad toont HTML-broncode met syntaxismarkering, het Preview-tabblad rendert de echte tabel in een sandbox-iframe in realtime
• Typebewuste markering: null wordt grijs en cursief weergegeven (tijdelijke aanduiding aanpasbaar), booleans verschijnen groen voor true en rood voor false, getallen worden blauw, bij geneste objecten toont hover de volledige JSON
• Rijlimietbeveiliging: standaard 1000 rijen (1-10000 instelbaar), invoer wordt automatisch afgekapt en in de UI wordt 'afgekapt' getoond, zodat de browser niet vastloopt op extreem grote DOM-rendering
• Directe generatie-statistieken: het rechterpaneel toont realtime 'X rijen × Y kolommen gegenereerd' plus een afkap-badge, zodat je bij lange JSON meteen de dataschaal ziet
• Kopiëren en downloaden met één klik: kopieer de HTML-broncode naar het klembord of download als table.html-bestand, klaar voor direct gebruik op je website
• Voorbeelddata en bestandsupload: ingebouwde voorbeelden van 3 producten (Laptop / Mouse / Desk Chair) met één klik te laden, sleep of klik om .json- of .txt-bestanden te uploaden
• Opties met één klik resetten: de Reset-knop rechts op de werkbalk herstelt alle 14 configureerbare opties in één keer naar de standaardwaarden, handig voor snelle experimenten
• Lokale geschiedenis: localStorage bewaart de laatste 200 invoeren permanent, na verversen of per ongeluk sluiten snel te herstellen
• Volledig lokaal in de browser: alle JSON-parsing, HTML-generatie, kopiëren en downloaden gebeurt in je browser, er wordt niets naar een server geüpload

Codevoorbeelden

// 1) Roep de GitHub API aan om een gebruikerslijst op te halen
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) Functie voor nesting afvlakken (equivalent aan de afvlaklogica van deze tool)
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) Zet afgevlakte data om naar een HTML-tabel en injecteer de Tailwind class
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) Injecteer in de pagina
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log('Generated ' + users.length + ' rows, column count ' + (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):
    """Recursief geneste objecten afvlakken"""
    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>Geen data</p>"

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

    # Elke rij afvlakken
    flat_rows = [flatten(row) for row in data]

    # Alle kolomnamen verzamelen (set voor deduplicatie, invoegvolgorde behouden)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

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

    # Tabelrijen genereren
    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">Data afgekapt tot eerste {max_rows} rijen</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) Geneste logboeken met jq aggregeren en afvlakken tot punt-gescheiden sleutels
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) Plak stats.json in deze tool
#    Kies op de werkbalk de modus 'Afvlakken (Aanbevolen)'
#    Vink aan: 'Zebrastrepen + Responsieve wikkel + Randen'
#    Vul in bij table class naam: min-w-full text-sm border-collapse
#    Stel de null-tijdelijke aanduiding in: - (ontbrekende velden tonen -)
#    Stel de Caption in: 2026-07 Statistieken productiefoutenlogboek
#    Klik op Convert en download table.html

# 3) Upload naar S3 / OSS statische website
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# Of embed in Confluence / Notion / VuePress-documentatie
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# Of verstuur als HTML-e-mail
mutt -e "set content_type=text/html" -s "2026-07 Foutenlogboek" your@email.com < table.html

Veelgestelde vragen

Probleemoplossing

Woordenlijst

HTML-tabel (HTML Table)

Gestructureerd dataweergave-element volgens de W3C-standaard, opgebouwd uit semantische tags zoals table / thead / tbody / tr / th / td / caption. De code die deze tool genereert volgt strikt deze structuur.

JSON-array

Een verzameling objecten tussen vierkante haken [...]. De tool gebruikt elk object in de array als één tabelrij; bij een lege array wordt geen tabel gegenereerd (er verschijnt een melding).

JSON-object

Een verzameling sleutel-waardeparen tussen accolades {}. De tool gebruikt elke sleutel van het object als tabelkop en de waarde als celinhoud; een enkel object wordt automatisch als één-rij-tabel verpakt.

Nesting afvlakken (Flatten)

Geneste objecten recursief uitvouwen tot punt-gescheiden platte sleutels, bijvoorbeeld {user:{name:'A'}} → 'user.name'. De tool ondersteunt automatisch afvlakken tot 6 diepteniveaus, met configureerbaar scheidingsteken.

thead / tbody

De twee semantische delen van een HTML-tabel: thead omvat de koprij (th), tbody omvat de datarijen (td). De gegenereerde code maakt strikt onderscheid tussen deze twee.

Caption

De tag voor de tabeltitel, de eerste regel binnen de table. De tool ondersteunt aangepaste Caption-tekst; indien ingeschakeld verschijnt de opgegeven titel boven de tabel, wat zowel SEO als toegankelijkheid ten goede komt.

Zebrastrepen (Zebra Striping)

Visueel patroon waarbij oneven en even rijen een afwisselende achtergrondkleur krijgen, vaak #fff / #f9fafb. De tool schakelt dit in via de checkbox 'Zebrastrepen', wat de leesbaarheid van lange tabellen aanzienlijk verbetert.

Inline stijl (Inline Style)

CSS direct in het style-attribuut van een HTML-tag schrijven, in plaats van te verwijzen naar een externe stylesheet. De tool geeft standaard alle stijlen via inline style, zodat je de code kunt kopiëren zonder extra CSS-bestand.

CSS-klasse-haak

Onderscheidend vermogen van deze tool: elke class-tekenreeks (zoals Tailwind-klassen) in de `<table>`-tag injecteren, voor naadloze integratie met bestaande CSS-frameworks. Dit is een belangrijke upgrade ten opzichte van concurrenten.

iframe sandbox

De veilige sandboxmodus van de HTML-tag iframe, waarmee onder andere scriptuitvoering en form-verzending kunnen worden beperkt. De tool gebruikt een iframe met sandbox="allow-same-origin" om de gegenereerde HTML te previewen, zodat scripts niet onverwacht worden uitgevoerd.

typebewuste markering

Onderscheidend vermogen van deze tool: op basis van het JavaScript-type van de celwaarde (null / boolean / number / object / string) worden verschillende kleuren toegepast, zodat API-data overzichtelijker te debuggen is.

localStorage-geschiedenis

De door de browser geleverde lokale sleutel-waarde-opslag (capaciteit ca. 5-10 MB). De tool gebruikt localStorage om de laatste 200 invoeren permanent te bewaren, zodat ze na verversen of per ongeluk sluiten snel te herstellen zijn.

Responsieve wikkel (Responsive Wrapper)

Om de tabel een `<div style="overflow-x:auto;max-width:100%;">` plaatsen, zodat op smalle schermen automatisch een horizontale scrollbalk verschijnt. De tool zet dit standaard aan en het kan op de werkbalk worden uitgezet.

Debounce

Frontend-prestatieoptimalisatie: callbacks van hoogfrequente events (zoals typen) worden samengevoegd tot één uitvoering na de laatste trigger. De tool hanteert 500ms debounce om vertraging bij het parsen van grote bestanden te voorkomen.

W3C HTML5

De HTML-standaard van het World Wide Web Consortium (W3C). De door deze tool gegenereerde code voldoet aan de HTML5-specificatie en wordt correct weergegeven in alle moderne browsers.

Vergelijkingstabel van drie modi voor nestingsverwerking

De werkbalk biedt drie modi voor verschillende nestingscenario's; kies op basis van de complexiteit van de JSON-structuur:

Overzichtstabel van 14 configureerbare opties op de werkbalk

Alle 14 configureerbare opties op de werkbalk en hun visuele verschillen, voor het snel kiezen van de juiste combinatie:

Overzichtstabel regels voor typebewuste celmarkering

De tool past automatisch verschillende kleuren toe op basis van het JavaScript-type van de JSON-waarde, zodat je het datatype in één oogopslag herkent:

Privacy & Security

Alle bewerkingen van deze JSON naar HTML-tool, zoals JSON-parsing, nesting afvlakken, HTML-generatie, kopiëren en downloaden, vinden volledig lokaal in je browser plaats via JavaScript. Zowel de ingevoerde JSON-data als de gegenereerde HTML-code worden niet naar een server geüpload en ook niet vastgelegd, gecachet of in de cloud opgeslagen. JSON met gevoelige API-responses of interne bedrijfsvelden kan veilig worden gebruikt; bij het sluiten van de pagina wordt alle data gewist.

Authoritative References

• MDNMDN - HTML <table>-element
• MDNMDN - Basisprincipes van HTML-tabellen
• WHATWGWHATWG - HTML-standaard, tabelelement
• MDNMDN - iframe sandbox-attribuut
• MDNMDN - JSON.parse / JSON.stringify
• TailwindTailwind CSS - Tabelstijlen
• BootstrapBootstrap - Tabellen