DevToolPal
FR

Convertisseur JSON en tableau HTML

Transformez un tableau JSON d'objets en tableau HTML, en aplatissant les champs imbriqués en colonnes à notation pointée.

Traitement local, rien n'est envoyé

Options

Entrée

0 caractères · 0 B

Sortie

0 caractères · 0 B

À quoi ça sert

Cet outil convertit des données JSON, typiquement une réponse d’API ou un export, en tableau HTML. Chaque objet devient une ligne et chaque clé une colonne. Les objets imbriqués sont aplatis en noms de colonnes à notation pointée, pour que le tableau reste en deux dimensions.

Mode d’emploi

  1. Collez du JSON dans le champ Entrée, importez un fichier .json ou cliquez sur Exemple.
  2. Le balisage du tableau apparaît à droite pendant la saisie. Le JSON invalide est signalé avec sa position.
  3. Désactivez Inclure la ligne d’en-tête si vous ne voulez que les lignes de données.
  4. Copiez le HTML ou téléchargez-le sous forme de fichier .html.

Exemple

[
  { "name": "Alice", "address": { "city": "Shanghai" }, "tags": ["admin", "editor"] },
  { "name": "Bob", "address": { "city": "Beijing" } }
]

donne un tableau avec les colonnes name, address.city et tags. La cellule tags d’Alice contient admin; editor et celle de Bob est vide.

Astuces

  • Pour afficher une réponse d’API, collez la réponse entière. Si elle ressemble à {"items": [...]}, les lignes sont automatiquement extraites de items.
  • Passez d’abord par le formateur JSON si vous voulez inspecter ou corriger le JSON avant de le convertir.

FAQ

› Quelle structure JSON l'outil attend-il ?

Un tableau d'objets fonctionne le mieux, un objet par ligne. Un objet avec une seule propriété de type tableau, comme {"data": [...]}, est aussi compris. Toute autre valeur devient une seule ligne.

› Comment sont gérés les objets et tableaux imbriqués ?

Les champs imbriqués deviennent des noms de colonnes à notation pointée, comme address.city. Les tableaux de valeurs simples sont joints avec "; ", et les tableaux d'objets reçoivent des chemins indexés comme items.0.name.

› Et si les objets n'ont pas les mêmes clés ?

Les colonnes sont l'union de toutes les clés, dans leur ordre de première apparition. Les valeurs manquantes restent vides.

› La sortie peut-elle être insérée sans risque dans une page web ?

Oui. Le texte est échappé pour le HTML : des valeurs comme <script> s'affichent comme du texte.