JSON a HTML

Relacionats

Sobre JSON a HTML i taules HTML

Casos d'ús

• Desenvolupament frontend: renderitzeu ràpidament dades JSON de l'API en taules HTML per incrustar a quadres de comandament d'administració o pàgines de documentació
• Projectes Tailwind / Bootstrap: enganxeu noms de classes de Tailwind o Bootstrap directament al camp de classe de taula per a una integració perfecta amb el vostre sistema d'estils existent
• Pàgines web responsives: l'embolcall de desplaçament horitzontal per defecte evita que les taules mòbils trenquin la disposició de la pàgina
• Visualització de dades: enganxeu taules estilitzades a blocs, documentació, Confluence, Notion o qualsevol plataforma que admeti incrustació HTML
• Generació d'informes: convertiu ràpidament dades JSON exportades del backend en informes HTML per correu electrònic per a les parts interessades del negoci
• Prototipat frontend: previsualitzeu estils de taula amb dades reals durant la fase de disseny per alinear-vos amb producte i disseny abans del lliurament
• Sistemes CMS: creeu fragments de taula HTML estàtics per a WordPress, Drupal i altres plataformes CMS, evitant la complexitat del motor de plantilles
• Proves i depuració: enganxeu la sortida JSON.stringify de la consola del navegador per previsualitzar ràpidament l'estructura bidimensional de dades imbricades complexes
• Plantilles de correu: incrustar HTML de taula en correus HTML (provar compatibilitat amb Outlook)
• Escriptura de documentació d'API: incrustar taules HTML a Markdown, Swagger, Redoc substituint els exemples JSON predeterminats
• Escenaris docents: convertiu tasques de JSON imbricat en cursos d'estructures de dades en taules per a la correcció en lot
• Informes de neteja de dades: convertiu JSON imbricat d'exportacions de bases de dades en taules mitjançant el mode Aplanament per a una fàcil comparació de camps

Com usar-ho

1. Enganxeu una matriu JSON (recomanada) o un sol objecte a l'editor esquerre, o feu clic a "Sample" per carregar 3 exemples de productes, o feu clic a "Upload" per carregar un fitxer .json / .txt
2. Trieu un mode de gestió imbricada a la barra d'eines (recomanat: "Aplanament"). Els objectes imbricats s'expandeixen automàticament a claus separades per punts com `user.name`
3. Feu clic al botó "Convert" (o simplement premeu Enter) per activar la conversió. L'entrada està protegida amb un debounce de 500ms
4. Canvieu a la pestanya Code a la dreta per veure el codi de taula HTML amb ressaltat de sintaxi, o la pestanya Preview per veure la renderització de l'iframe en temps real
5. Activeu les opcions d'estil a la barra d'eines (ratlles zebrades / vores / passar per sobre / compacte / responsiu), introduïu una classe de taula personalitzada, configureu el marcador de posició null — la previsualització en directe s'actualitza instantàniament
6. Quan estigueu satisfets, feu clic a "Copy" per copiar el codi HTML o "Download" per desar com a table.html. Feu clic a Reset si necessiteu començar de nou

Característiques

• Aplanament automàtic d'objectes imbricats: expandeix recursivament `{user:{name,age}}` en claus amb notació de punts `user.name`, `user.age` (separador configurable), sense scripts manuals
• Tres modes de gestió imbricada: Aplanament (Recomanat, auto-expansió fins a 6 nivells) / Claus de nivell superior (objecte imbricat com a columna única) / Cadena (objecte imbricat com a cadena JSON)
• Hook de classe CSS personalitzada: injecta qualsevol cadena de classe a `<table>` i al `<div>` embolcall opcional, integració perfecta amb Tailwind / Bootstrap / Bulma
• Desplaçament horitzontal responsiu: embolcall exterior `overflow-x:auto` per defecte, apareix una barra de desplaçament horitzontal automàticament a pantalles estretes
• 6 interruptors d'estil visual: ratlles zebrades, vores, ressaltat en passar per sobre, mode compacte, columna d'índex (#), llegenda de taula — aplicació instantània des de les caselles de la barra d'eines
• Pestanyes dobles Code + iframe: la pestanya Code mostra el codi HTML amb ressaltat de sintaxi, la pestanya Preview renderitza la taula real en un iframe sandbox en temps real
• Ressaltat per tipus: null es mostra en gris cursiva (text de marcador de posició personalitzable), booleans en verd/vermell, números en blau, objectes imbricats es poden veure com a JSON complet en passar per sobre
• Protecció del límit de files: límit per defecte de 1000 files (1-10000 configurable), trunca automàticament amb un avís "Truncat" per evitar que el navegador es torni lent
• Retroalimentació d'estadístiques de generació: el panell dret mostra "X files × Y columnes generades" + insígnia de truncament en temps real
• Còpia / descàrrega amb un sol clic: en mode Code, copia el codi HTML al porta-retalls o descarrega'l com a fitxer table.html
• Dades de mostra + càrrega de fitxers: 3 mostres de productes integrades (Laptop / Mouse / Desk Chair) amb càrrega d'un sol clic, admet arrossegar i deixar anar o fer clic per carregar fitxers .json / .txt
• Reinici amb un sol clic: el botó Reinicia de la barra d'eines restaura instantàniament les 14 configuracions als valors predeterminats
• Historial local: basat en localStorage, emmagatzema les 200 entrades més recents de manera persistent, recuperable després d'actualitzar o tancar la pestanya per accident
• Processament completament local al navegador: tota l'anàlisi JSON, generació d'HTML, còpia i descàrrega passa al vostre navegador, sense enviar dades a cap servidor

Exemples de codi

// 1) Crida l'API de GitHub per obtenir la llista d'usuaris
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) Funció d'aplanament imbricat (equivalent a la lògica d'aplanament de l'eina)
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) Converteix les dades aplanades a taula HTML, injecta classes de Tailwind
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) Injecta a la pàgina
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log('Generades ' + users.length + ' files, ' + (Object.keys(flattenObject(users[0])).length) + ' columnes');

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):
    """Aplana recursivament els objectes imbricats"""
    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>Sense dades</p>"

    # Truncament de files
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # Aplana cada fila
    flat_rows = [flatten(row) for row in data]

    # Recull tots els noms de columna (utilitza set per desduplicar, conservant l'ordre d'inserció)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

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

    # Genera files de taula
    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">Dades truncades a les primeres {max_rows} files</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) Utilitzeu jq per agregar i aplanar registres imbricats a claus amb notació de punts
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) Enganxeu stats.json a aquesta eina
#    Seleccioneu el mode "Aplanament (Recomanat)" a la barra d'eines
#    Marqueu "Ratlles zebrades + Embolcall responsiu + Vores"
#    Al camp nom de classe de taula introduïu: min-w-full text-sm border-collapse
#    Configureu el marcador de posició null: - (els camps que falten es mostren com a -)
#    Configureu la Llegenda: Estadístiques del registre d'errors de producció 2026-07
#    Feu clic a Convert i després baixeu table.html

# 3) Pugeu a un lloc web estàtic S3 / OSS
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# O incrustar a documentació de Confluence / Notion / VuePress
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# O enviar com a correu electrònic HTML
mutt -e "set content_type=text/html" -s "Registre d'errors 2026-07" your@email.com < table.html

Preguntes freqients

Solució de problemes

Glossari

Taula HTML (HTML Table)

Element de visualització de dades estructurades estàndard de W3C, compost per etiquetes semàntiques table / thead / tbody / tr / th / td / caption. El codi generat per aquesta eina segueix estrictament aquesta estructura.

Matriu JSON

Col·lecció d'objectes embolicats entre claudàtors [...]. L'eina utilitza cada objecte de la matriu com a fila de la taula; una matriu buida no genera cap taula (es mostra un avís).

Objecte JSON

Col·lecció de parells clau-valor embolicats entre claus {}. L'eina utilitza cada clau de l'objecte com a capçalera de la taula i el valor com a cel·la; un sol objecte s'embolica automàticament com a taula d'una sola fila.

Aplanament (Flatten)

Expansió recursiva d'objectes imbricats en claus planes separades per punts, p. ex. {user:{name:'A'}} → 'user.name'. L'eina admet l'aplanament automàtic de 6 nivells amb un separador configurable.

thead / tbody

Dues divisions semàntiques de la taula HTML: thead embolcalla la fila de capçalera (th), tbody embolcalla les files de dades (td). El codi generat per l'eina distingeix estrictament aquestes dues parts.

Caption

Etiqueta de títol de la taula, ubicada a la primera fila dins de la taula. L'eina admet text de llegenda personalitzat; quan està activat, el títol especificat es mostra a la part superior de la taula, útil tant per a SEO com per a accessibilitat.

Ratlles zebrades (Zebra Striping)

Patró visual en què les files senars i parelles utilitzen alternativament colors de fons diferents, comunament la combinació #fff / #f9fafb. L'eina ho activa mitjançant la casella "Ratlles zebrades", millorant significativament la llegibilitat per a taules llargues.

Estil en línia (Inline Style)

Escriure CSS directament a través de l'atribut style d'una etiqueta HTML, en lloc de fer referència a un full d'estils extern. L'eina genera tots els estils com a estil en línia per defecte, de manera que el codi es pot utilitzar tal qual sense fitxers CSS addicionals.

Hook de classe CSS

Capacitat diferencial de l'eina: injectar qualsevol cadena de classe (com una classe de Tailwind) a l'etiqueta `<table>`, integrant-se perfectament amb els marcs CSS existents. Aquesta és una millora clau respecte als competidors.

iframe sandbox

Mode sandbox segur de l'etiqueta HTML iframe, que pot restringir l'execució d'scripts i l'enviament de formularis. L'eina utilitza un iframe amb sandbox="allow-same-origin" per previsualitzar l'HTML generat, evitant l'execució accidental d'scripts.

Ressaltat per tipus

Capacitat diferencial de l'eina: aplicació de colors diferents segons el tipus JS del valor de la cel·la (null / boolean / number / object / string), fent la depuració de dades d'API més intuïtiva.

Historial localStorage

Emmagatzematge local de clau-valor proporcionat pel navegador (capacitat ~5-10MB). L'eina utilitza localStorage per emmagatzemar de manera persistent les 200 entrades més recents, que es poden restaurar ràpidament després d'actualitzar o tancar la pestanya per accident.

Embolcall responsiu (Responsive Wrapper)

Embolcallar la taula en un `<div style="overflow-x:auto;max-width:100%;">` extern perquè la taula obtingui automàticament una barra de desplaçament horitzontal a pantalles estretes. Activat per defecte; es pot desactivar a la barra d'eines.

Debounce

Tècnica d'optimització del rendiment del frontend: combinar les devolucions de trucada d'esdeveniments d'alta freqüència (com l'entrada) en una única execució després de l'última activació. L'eina estableix un debounce de 500ms per evitar retards en l'anàlisi de fitxers grans.

W3C HTML5

Especificació estàndard HTML creada pel World Wide Web Consortium (W3C). El codi generat per l'eina compleix l'especificació HTML5 i es renderitza correctament a tots els navegadors moderns.

Comparació de tres modes de gestió imbricada

La barra d'eines proporciona tres modes per a diferents escenaris imbricats. Trieu segons la complexitat de l'estructura JSON:

Full de referència ràpida de les 14 opcions configurables de la barra d'eines

Totes les 14 opcions configurables de la barra d'eines i les seves diferències visuals, per a una selecció ràpida de combinacions:

Full de referència ràpida de les regles de ressaltat per tipus de cel·la

L'eina aplica automàticament colors diferents segons el tipus JavaScript del valor JSON per a un reconeixement ràpid del tipus de dades:

Privacy & Security

Aquesta eina JSON a HTML executa tota l'anàlisi JSON, l'aplanament imbricat, la generació d'HTML, la còpia i la descàrrega completament al vostre navegador mitjançant JavaScript. Les dades JSON d'entrada i el codi HTML generat no es pugen a cap servidor, ni es registren, emmagatzemen a la memòria cau o al núvol. Podeu utilitzar aquesta eina de manera segura amb respostes d'API sensibles no publicades i camps de negoci interns — tancar la pàgina esborra totes les dades.

Authoritative References

• MDNMDN — Element HTML <table>
• MDNMDN — Conceptes bàsics de taules HTML
• W3CEspecificació W3C HTML5 — element table
• MDNMDN — atribut iframe sandbox
• MDNMDN — JSON.parse / JSON.stringify
• TailwindTailwind CSS — Estils de taula
• BootstrapBootstrap — Taules