JSON in HTML

Raccomandazioni correlate

Informazioni su JSON in HTML e tabelle HTML

Casi d'uso

• Sviluppo frontend: renderizza rapidamente i dati JSON restituiti dalle API in tabelle HTML da incorporare in dashboard di amministrazione o pagine di documentazione
• Progetti Tailwind / Bootstrap: inserisci direttamente le classi Tailwind o Bootstrap nella casella «Nome classe tabella» per un'integrazione perfetta con i sistemi di stile esistenti
• Pagine web responsive: il wrapper con scorrimento orizzontale è attivo per impostazione predefinita, le tabelle sui dispositivi mobili non rompono il layout
• Visualizzazione dati: incolla tabelle con stile in piattaforme che supportano l'incorporamento HTML come blog, documentazione, Confluence, Notion
• Generazione di report: converti rapidamente i dati JSON esportati dal backend in report email HTML da inviare ai reparti aziendali
• Prototipazione frontend: usa dati reali in fase di design per visualizzare in anteprima lo stile delle tabelle, facilitando l'allineamento con prodotto e design prima della consegna
• Sistemi CMS: crea frammenti di tabelle HTML statiche per CMS come WordPress o Drupal, evitando la complessità dei motori di template
• Test e debug: usa JSON.stringify nella console del browser e incolla qui per visualizzare rapidamente la struttura bidimensionale di dati annidati complessi
• Template email: incorpora il codice HTML delle tabelle nelle email in formato HTML (nota: è necessario testare la compatibilità con client come Outlook)
• Documentazione API: incorpora tabelle HTML in Markdown, Swagger o Redoc come alternativa agli esempi JSON predefiniti
• Contesto didattico: converti i compiti JSON annidati degli studenti in tabelle uniformi per correzione e presentazione nei corsi di strutture dati
• Report di pulizia dati: converti in tabelle JSON annidati esportati dal database tramite la modalità di appiattimento per facilitare il confronto dei campi

Come utilizzare

1. Incolla un array JSON (consigliato) o un singolo oggetto nell'editor a sinistra, oppure fai clic su «Sample» per caricare 3 esempi di prodotti, oppure fai clic su «Upload» per caricare un file .json / .txt
2. Seleziona la modalità di gestione annidamento nella barra degli strumenti (consigliata «Appiattisci»), gli oggetti annidati verranno espansi automaticamente in chiavi con notazione a punti come `user.name`
3. Fai clic sul pulsante «Convert» (oppure premi direttamente Invio) per attivare la conversione; l'input è protetto da un debounce di 500 ms
4. Visualizza il codice della tabella HTML con evidenziazione della sintassi nella tab Code a destra e il rendering reale in tempo reale nella tab Preview tramite iframe
5. Spunta le opzioni di stile nella barra degli strumenti (righe alternate, bordi, hover, compatto, responsive), inserisci una classe personalizzata per la tabella, imposta il segnaposto per null, l'anteprima si aggiorna automaticamente in tempo reale
6. Quando sei soddisfatto, fai clic su «Copy» per copiare il codice HTML e incollarlo nella pagina web, oppure su «Download» per scaricare un file table.html; per ripristinare, fai clic su Reset

Funzionalità

• Appiattimento automatico di oggetti annidati: espansione ricorsiva di `{user:{name,age}}` in chiavi separate da punti come `user.name`, `user.age` (separatore configurabile), senza scrivere script di appiattimento
• Tre modalità di gestione annidamento: Appiattisci (consigliata, profondità 6 livelli automatica) / Chiavi di primo livello (oggetto annidato come singola colonna) / Come stringa (oggetto annidato convertito in stringa JSON di anteprima)
• Hook per classe CSS personalizzata: inietta una stringa di classi personalizzate su `<table>` e opzionalmente sul `<div>` esterno, integrazione perfetta con sistemi di stile come Tailwind, Bootstrap o Bulma
• Scorrimento orizzontale responsive: contenitore esterno predefinito con `overflow-x:auto`, le barre di scorrimento orizzontali appaiono automaticamente su schermi stretti senza alterare il layout della pagina
• 6 opzioni di stile visivo: righe alternate, bordi, evidenziazione al passaggio del mouse, modalità compatta, indice prima colonna (#), titolo Caption della tabella, caselle di controllo della barra degli strumenti attive immediatamente
• Doppia tab di anteprima Codice e iframe: la tab Code mostra il codice sorgente HTML con evidenziazione della sintassi, la tab Preview esegue il rendering reale della tabella in un iframe sandbox
• Evidenziazione per tipo: null visualizzato in grigio corsivo (testo segnaposto personalizzabile), booleani in verde/rosso per true/false, numeri in blu, oggetti annidati visualizzabili in hover per il JSON completo
• Protezione per limite di righe: limite predefinito di 1000 righe (regolabile 1-10000), troncamento automatico con notifica nell'interfaccia «troncato» per evitare rallentamenti del browser su DOM di grandi dimensioni
• Feedback statistico di generazione: il pannello destro mostra in tempo reale «righe generate X × colonne Y» + badge di troncamento, per comprendere immediatamente la scala dei dati durante il debug di JSON lunghi
• Copia e download con un clic: in modalità Code è possibile copiare il codice HTML negli appunti con un clic o scaricare un file table.html pronto per l'uso sul sito
• Dati di esempio e caricamento file: 3 esempi di prodotti predefiniti (Laptop / Mouse / Sedia da scrivania) caricabili con un clic, supporto per trascinamento o caricamento di file .json / .txt
• Ripristino opzioni con un clic: il pulsante Reset sulla destra della barra degli strumenti ripristina tutte le 14 opzioni di configurazione ai valori predefiniti, ideale per sperimentare rapidamente
• Cronologia locale: persistenza basata su localStorage delle ultime 200 voci di input, ripristino rapido dopo aggiornamenti o chiusure accidentali della pagina
• Esecuzione completamente locale nel browser: tutte le operazioni di analisi JSON, generazione HTML, copia e download vengono eseguite nel tuo browser, nessun dato viene inviato a server

Esempi di codice

// 1) Call the GitHub API to fetch the user list
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) Nested flatten function (equivalent to this tool's flatten logic)
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) Convert the flattened data into an HTML table, injecting Tailwind classes
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) Inject into the page
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):
    """Recursively flatten nested objects"""
    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>No data</p>"

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

    # Flatten each row
    flat_rows = [flatten(row) for row in data]

    # Collect all column names (using a set to deduplicate, preserving insertion order)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

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

    # Generate table rows
    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 truncated to the first {max_rows} rows</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) Use jq to aggregate and flatten nested logs into dot-notation keys
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) Paste stats.json into this tool
#    Select «Appiattisci (consigliata)» in the toolbar
#    Enable «Zebra + Responsive + Bordered»
#    In the table class name input: min-w-full text-sm border-collapse
#    Set null placeholder: - (missing fields will display -)
#    Set Caption: 2026-07 Production error log statistics
#    Click Convert and download table.html

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

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

# Or send as HTML email
mutt -e "set content_type=text/html" -s "2026-07 Error log" your@email.com < table.html

Domande frequenti

Risoluzione dei problemi

Glossario

Tabella HTML (HTML Table)

Elemento W3C standard per la visualizzazione di dati strutturati, composto da tag semantici come table / thead / tbody / tr / th / td / caption. Il codice generato da questo strumento segue rigorosamente questa struttura.

Array JSON

Raccolta di oggetti racchiusa tra parentesi quadre [...]. Questo strumento considera ogni oggetto dell'array come una riga della tabella; se l'array è vuoto, la tabella non viene generata (viene mostrato un messaggio).

Oggetto JSON

Raccolta di coppie chiave-valore racchiuse tra parentesi graffe {}. Questo strumento utilizza ogni chiave dell'oggetto come intestazione e il valore come cella; un singolo oggetto viene automaticamente racchiuso in una tabella a riga singola.

Appiattimento annidato (Flatten)

Espansione ricorsiva di un oggetto annidato in chiavi piatte separate da punti, ad esempio {user:{name:'A'}} → 'user.name'. Questo strumento supporta l'appiattimento automatico fino a 6 livelli di profondità, con separatore configurabile.

thead / tbody

Due partizioni semantiche della tabella HTML: thead racchiude la riga di intestazione (th), tbody racchiude le righe di dati (td). Il codice generato da questo strumento distingue rigorosamente queste due parti.

Caption

Tag del titolo della tabella, situato nella prima riga interna di table. Questo strumento supporta un testo Caption personalizzato: se attivato, mostra il titolo specificato sopra la tabella, utile sia per la SEO che per l'accessibilità.

Righe alterne (Zebra Striping)

Schema visivo in cui righe pari e dispari della tabella alternano colori di sfondo diversi, solitamente combinazioni #fff / #f9fafb. Questo strumento lo attiva tramite la casella «Righe alternate», migliorando significativamente la leggibilità delle tabelle lunghe.

Stile inline (Inline Style)

CSS scritto direttamente tramite l'attributo style del tag HTML, anziché fare riferimento a un foglio di stile esterno. Per impostazione predefinita, questo strumento emette tutti gli stili tramite stili inline, pronti per l'uso senza file CSS aggiuntivi.

Hook per classe CSS

Capacità differenziante di questo strumento: iniettare qualsiasi stringa di classi (come classi Tailwind) sul tag `<table>`, per un'integrazione perfetta con i framework CSS esistenti. È un aggiornamento chiave rispetto ai concorrenti.

iframe sandbox

Modalità sandbox di sicurezza del tag HTML iframe, che limita l'esecuzione di script, l'invio di moduli ecc. Questo strumento utilizza un iframe con sandbox="allow-same-origin" per visualizzare in anteprima l'HTML generato, evitando esecuzioni accidentali di script.

Evidenziazione in base al tipo (type-aware)

Capacità differenziante di questo strumento: applica colori diversi in base al tipo JS del valore della cella (null / boolean / number / object / string), rendendo il debug dei dati API più intuitivo.

Cronologia localStorage

Archiviazione locale chiave-valore fornita dal browser (capacità circa 5-10 MB). Questo strumento utilizza localStorage per salvare in modo persistente le ultime 200 voci di input, consentendo un ripristino rapido dopo aggiornamenti o chiusure accidentali della pagina.

Wrapper responsive (Responsive Wrapper)

Aggiunta di `<div style="overflow-x:auto;max-width:100%;">` attorno alla tabella, in modo che la tabella mostri automaticamente una barra di scorrimento orizzontale su schermi stretti. Questo strumento lo attiva per impostazione predefinita, disattivabile dalla barra degli strumenti.

Debounce

Tecnica di ottimizzazione delle prestazioni frontend: unisce più invocazioni di callback di eventi ad alta frequenza (come l'input) in un'unica esecuzione dopo l'ultima attivazione. Questo strumento imposta un debounce di 500 ms per evitare rallentamenti nell'analisi di file di grandi dimensioni.

W3C HTML5

Specifica standard HTML definita dal World Wide Web Consortium (W3C). Il codice generato da questo strumento è conforme alla specifica HTML5 e viene renderizzato correttamente in tutti i browser moderni.

Confronto tra le tre modalità di gestione degli oggetti annidati

La barra degli strumenti offre tre modalità per gestire diversi scenari di annidamento: scegli in base alla complessità della struttura JSON.

Tabella rapida delle 14 opzioni configurabili della barra degli strumenti

Tutte le 14 opzioni configurabili della barra degli strumenti e le relative differenze visive, per scegliere rapidamente le combinazioni:

Tabella rapida delle regole di evidenziazione basata sul tipo di cella

Lo strumento applica automaticamente colori diversi in base al tipo JavaScript del valore JSON, per identificare rapidamente il tipo di dato:

Privacy & Security

Tutte le operazioni di analisi JSON, appiattimento annidato, generazione HTML, copia e download di questo strumento JSON in HTML vengono eseguite completamente nel tuo browser tramite JavaScript, in locale. I dati JSON inseriti e il codice HTML generato non vengono mai caricati su alcun server, né registrati, memorizzati nella cache o archiviati nel cloud. JSON contenenti risposte API riservate o campi aziendali interni possono essere utilizzati in tutta sicurezza: chiudendo la pagina tutti i dati vengono eliminati.

Authoritative References

• MDNMDN - Elemento HTML <table>
• MDNMDN - Basi delle tabelle HTML
• W3CSpecifica HTML5 - elemento table
• MDNMDN - Attributo sandbox di iframe
• MDNMDN - JSON.parse / JSON.stringify
• TailwindTailwind CSS - Stili delle tabelle
• BootstrapBootstrap - Tables