JSON vers HTML

Recommandations connexes

À propos de JSON vers HTML et des tableaux HTML

Cas d'utilisation

• Développement frontend : restituer rapidement des données JSON renvoyées par une API en tableau HTML à intégrer dans un back-office ou une page de documentation
• Projets Tailwind / Bootstrap : saisir directement des classes Tailwind ou Bootstrap dans « nom de classe table », pour une intégration transparente avec votre système de style existant
• Pages web responsive : emballage avec défilement horizontal activé par défaut, les tableaux mobiles n'écrasent pas la mise en page
• Visualisation de données : coller des tableaux avec style dans des plateformes prenant en charge l'intégration HTML comme les blogs, la documentation, Confluence, Notion
• Génération de rapports : convertir rapidement des données JSON exportées du backend en rapports HTML par e-mail à envoyer aux équipes métier
• Prototypage frontend : prévisualiser le style d'un tableau avec de vraies données pendant la phase de design, pour s'aligner avec le produit et le design avant la livraison
• Systèmes CMS : créer des extraits de tableaux HTML statiques pour WordPress, Drupal et autres CMS, en évitant la complexité des moteurs de templates
• Tests et débogage : coller le résultat de JSON.stringify depuis la console du navigateur pour prévisualiser rapidement la structure bidimensionnelle de données imbriquées complexes
• Modèles d'e-mail : intégrer le HTML du tableau dans un e-mail HTML (attention à tester la compatibilité avec les clients comme Outlook)
• Rédaction de documentation API : intégrer des tableaux HTML dans la documentation Markdown / Swagger / Redoc en remplacement des exemples JSON par défaut
• Enseignement : convertir les devoirs JSON imbriqués des étudiants en tableaux pour une correction et un affichage unifiés dans un cours de structures de données
• Rapports de nettoyage de données : convertir un JSON imbriqué exporté d'une base de données en tableau via le mode d'aplatissement, pour comparer facilement les champs

Comment utiliser

1. Collez un tableau JSON (recommandé) ou un objet unique dans l'éditeur de gauche, ou cliquez sur « Sample » pour charger 3 exemples de produits, ou cliquez sur « Upload » pour téléverser un fichier .json / .txt
2. Sélectionnez le mode de traitement des imbrications dans la barre d'outils (« Aplatir » recommandé), les objets imbriqués seront automatiquement développés en clés séparées par des points comme `user.name`
3. Cliquez sur le bouton « Convert » (ou appuyez directement sur Entrée) pour déclencher la conversion ; un debounce de 500 ms protège la saisie
4. Consultez le code du tableau HTML avec coloration syntaxique dans l'onglet Code à droite, et le rendu en temps réel dans l'iframe de l'onglet Aperçu
5. Cochez les options de style dans la barre d'outils (zébrures / bordures / survol / compact / responsive), remplissez la classe table personnalisée, définissez l'espace réservé null, l'aperçu se met à jour en temps réel
6. Une fois satisfait, cliquez sur « Copy » pour copier le code HTML à coller dans une page web, ou sur « Download » pour télécharger un fichier table.html ; cliquez sur Reset pour réinitialiser

Fonctionnalités

• Aplatissement automatique des objets imbriqués : développement récursif de `{user:{name,age}}` en clés séparées par des points comme `user.name`, `user.age` (séparateur configurable), sans avoir à écrire un script d'aplatissement
• Trois modes de traitement des imbrications : Aplatir (Recommandé, développement automatique jusqu'à 6 niveaux de profondeur) / Clés de premier niveau (objets imbriqués en colonne unique) / En chaîne (objets imbriqués convertis en aperçu de chaîne JSON)
• Crochet de classe CSS personnalisée : injectez une chaîne de classes personnalisée sur `<table>` et éventuellement sur le `<div>` externe, pour une intégration transparente avec Tailwind, Bootstrap, Bulma et autres systèmes de style
• Défilement horizontal responsive : conteneur externe par défaut avec `overflow-x:auto`, une barre de défilement horizontale apparaît automatiquement sur les petits écrans sans déformer la mise en page
• 6 options de style visuel : lignes zébrées, bordures, surbrillance au survol, mode compact, colonne d'index (#), titre Caption du tableau, cases à cocher de la barre d'outils appliquées en temps réel
• Double onglet de prévisualisation Code et iframe : l'onglet Code affiche le code source HTML avec coloration syntaxique, l'onglet Aperçu restitue le rendu réel du tableau via une iframe sandbox
• Coloration par type : null affiché en gris italique (texte d'espace réservé personnalisable), booléens true/false en vert/rouge, nombres en bleu, survol des objets imbriqués pour voir le JSON complet
• Protection par limite de lignes : plafond par défaut de 1000 lignes (réglable de 1 à 10000), troncature automatique au-delà avec notification « tronqué » dans l'interface, pour éviter les ralentissements du navigateur sur des DOM très volumineux
• Retour statistique de génération : le panneau de droite affiche en temps réel « X lignes × Y colonnes générées » + badge de troncature, pour voir d'un coup d'œil l'échelle des données lors du débogage de longs JSON
• Copie et téléchargement en un clic : en mode Code, copiez le code source HTML dans le presse-papiers ou téléchargez-le sous forme de fichier table.html directement utilisable sur un site web
• Données d'exemple + téléversement de fichier : 3 exemples de produits intégrés (Laptop / Mouse / Desk Chair) chargeables en un clic, prise en charge du glisser-déposer ou du clic pour téléverser des fichiers .json / .txt
• Réinitialisation des options en un clic : le bouton Reset à droite de la barre d'outils rétablit en un clic les 14 options configurables à leurs valeurs par défaut, pour des essais et erreurs rapides
• Historique local : persistance des 200 dernières entrées dans le localStorage, restauration rapide après rafraîchissement ou fermeture accidentelle de la page
• Fonctionnement 100 % local dans le navigateur : tout le parsing JSON, la génération HTML, la copie et le téléchargement se font dans votre navigateur, aucune donnée envoyée sur un serveur

Exemples de code

// 1) Appel de l'API GitHub pour récupérer la liste des utilisateurs
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) Fonction d'aplatissement des imbrications (équivalent à la logique d'aplatissement de cet outil)
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) Convertir les données aplaties en tableau HTML et injecter les classes 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) Injection dans la page
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log('Généré ' + users.length + ' lignes, ' + (Object.keys(flattenObject(users[0])).length) + ' colonnes');

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):
    """Aplatissement récursif des objets imbriqués"""
    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>Aucune donnée</p>"

    # Troncature du nombre de lignes
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # Aplatir chaque ligne de données
    flat_rows = [flatten(row) for row in data]

    # Collecter tous les noms de colonnes (avec un set pour le dédoublonnage, en conservant l'ordre d'insertion)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

    # Générer l'en-tête
    thead = "".join(f'<th class="px-4 py-2 text-left bg-gray-100">{c}</th>' for c in columns)

    # Générer les lignes du tableau
    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">Données tronquées aux {max_rows} premières lignes</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) Utiliser jq pour agréger et aplatir les logs imbriqués en noms de clés à points
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) Coller stats.json dans cet outil
#    Sélectionner le mode « Aplatir (Recommandé) » dans la barre d'outils
#    Cocher « Zébrures + Emballage responsive + Bordures »
#    Saisir dans le nom de classe table : min-w-full text-sm border-collapse
#    Définir l'espace réservé null : - (les champs manquants s'affichent en -)
#    Définir le Caption : Statistiques des logs d'erreur de production 2026-07
#    Cliquer sur Convert puis télécharger table.html

# 3) Téléverser sur S3 / OSS en site statique
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# Ou intégrer dans la documentation Confluence / Notion / VuePress
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# Ou envoyer un e-mail HTML
mutt -e "set content_type=text/html" -s "Logs d'erreur 2026-07" your@email.com < table.html

FAQ

Dépannage

Glossaire

Tableau HTML (HTML Table)

Élément W3C standard d'affichage de données structurées, composé de balises sémantiques table / thead / tbody / tr / th / td / caption. Le code généré par cet outil suit strictement cette structure.

Tableau JSON

Collection d'objets entourée de crochets [...]. L'outil considère chaque objet du tableau comme une ligne ; un tableau vide ne génère aucun tableau (un message s'affiche).

Objet JSON

Collection de paires clé-valeur entourée d'accolades {}. L'outil utilise chaque clé de l'objet comme en-tête, et la valeur comme cellule ; un objet unique est automatiquement encapsulé dans un tableau à une seule ligne.

Aplatissement des imbrications (Flatten)

Développement récursif d'un objet imbriqué en noms de clés plats séparés par des points, par exemple {user:{name:'A'}} → 'user.name'. L'outil prend en charge l'aplatissement automatique jusqu'à 6 niveaux de profondeur, séparateur configurable.

thead / tbody

Les deux zones sémantiques d'un tableau HTML : thead enveloppe la ligne d'en-tête (th), tbody enveloppe les lignes de données (td). Le code généré par cet outil distingue strictement ces deux parties.

Caption

Balise de titre du tableau, située en première position à l'intérieur de table. L'outil prend en charge la personnalisation du texte Caption, qui s'affiche au-dessus du tableau lorsqu'elle est activée, utile pour le SEO et l'accessibilité.

Zébrures (Zebra Striping)

Motif visuel où les lignes paires et impaires du tableau utilisent des couleurs de fond alternées, souvent une combinaison #fff / #f9fafb. L'outil active ce motif via la case « Zébrures » de la barre d'outils, avec un gain de lisibilité significatif pour les longs tableaux.

Style inline (Inline Style)

CSS écrit directement via l'attribut style d'une balise HTML, plutôt que via une feuille de style externe. Par défaut, tous les styles de l'outil sont émis en style inline, prêts à l'emploi sans fichier CSS supplémentaire.

Crochet de classe CSS

Capacité différenciante de cet outil : injecter n'importe quelle chaîne de classes (par exemple des classes Tailwind) sur la balise `<table>`, pour une intégration transparente avec un framework CSS existant. Une amélioration clé par rapport aux concurrents.

iframe sandbox

Mode bac à sable sécurisé de la balise HTML iframe, qui peut limiter l'exécution de scripts, la soumission de formulaires, etc. L'outil utilise une iframe avec sandbox="allow-same-origin" pour prévisualiser le HTML généré, afin d'éviter toute exécution accidentelle de script.

Coloration par type (type-aware)

Capacité différenciante de cet outil : appliquer différentes couleurs en fonction du type JS de la valeur de la cellule (null / boolean / number / object / string), pour rendre le débogage des données API plus intuitif.

Historique localStorage

Stockage local clé-valeur fourni par le navigateur (capacité d'environ 5-10 Mo). L'outil utilise le localStorage pour conserver les 200 dernières entrées, restaurables rapidement après rafraîchissement ou fermeture accidentelle de la page.

Emballage responsive (Responsive Wrapper)

Ajout d'un <div style="overflow-x:auto;max-width:100%;"> autour du tableau, pour qu'une barre de défilement horizontale apparaisse automatiquement sur les petits écrans. Activé par défaut dans l'outil, désactivable via la barre d'outils.

Debounce

Technique d'optimisation des performances frontend : regrouper les rappels d'événements haute fréquence (comme la saisie) pour ne les exécuter qu'une seule fois après le dernier déclenchement. L'outil applique un debounce de 500 ms pour éviter les ralentissements lors de l'analyse de gros fichiers.

W3C HTML5

Spécification HTML définie par le World Wide Web Consortium (W3C). Le code généré par cet outil est conforme à la spécification HTML5 et s'affiche correctement dans tous les navigateurs modernes.

Tableau comparatif des trois modes de traitement des objets imbriqués

La barre d'outils propose trois modes pour s'adapter aux différents scénarios d'imbrication. Choisissez en fonction de la complexité de la structure JSON :

Tableau de référence rapide des 14 options configurables de la barre d'outils

Les 14 options configurables de la barre d'outils et leurs différences visuelles, pour vous aider à choisir rapidement la bonne combinaison :

Tableau de référence rapide des règles de coloration par type de cellule

L'outil applique automatiquement différentes couleurs en fonction du type JavaScript de la valeur JSON, pour identifier rapidement le type de donnée :

Privacy & Security

Cet outil JSON vers HTML effectue l'intégralité du parsing JSON, de l'aplatissement des imbrications, de la génération HTML, de la copie et du téléchargement directement dans votre navigateur via JavaScript. Les données JSON saisies et le code HTML généré ne sont jamais téléversés sur un serveur, ni enregistrés, mis en cache ou stockés dans le cloud. Vous pouvez utiliser en toute confiance des JSON sensibles contenant des retours d'API non publiés ou des champs métier internes ; toutes les données sont effacées dès la fermeture de la page.

Authoritative References

• MDNMDN - Élément HTML <table>
• MDNMDN - Bases des tableaux HTML
• W3CSpécification HTML5 WHATWG - Élément table
• MDNMDN - Attribut iframe sandbox
• MDNMDN - JSON.parse / JSON.stringify
• TailwindTailwind CSS - Styles de tableau
• BootstrapBootstrap - Tables