JSON en tableau HTML

Comment ça marche

Collez votre JSON dans le panneau de gauche ; le code du tableau HTML s'affiche aussitôt à droite. Un tableau d'objets (des enregistrements entre accolades, placés entre crochets) devient un tableau ligne par ligne : les en-têtes de colonnes réunissent les clés de tous les enregistrements, et un champ absent d'un enregistrement reste une cellule vide. Un objet seul donne un tableau à deux colonnes « Champ / Valeur ». L'exemple contient deux personnes ; la seconde n'a pas de quartier mais a un champ « note ». Avec « Aplatir », l'objet adresse se divise en colonnes adresse.ville et adresse.quartier, le résultat fait 2 lignes sur 5 colonnes et les cellules manquantes restent vides. Avec « Tableau interne », un petit tableau est dessiné dans la cellule adresse. Les listes simples comme [1, 2, 3] s'écrivent « 1, 2, 3 ». Un texte comme « Prix < 100 & en stock » est échappé avec &lt; et &amp; ; il s'affiche pareil, mais le navigateur ne le prend pas pour une balise. Collez le code dans un bloc « HTML personnalisé » de WordPress ou dans la vue source d'un modèle d'e-mail.

Cet outil est aussi connu sous le nom de convertir json en tableau html, json en html, afficher json en tableau, json vers html, json to html, json to html table.

Qu'est-ce que JSON ?

Le JSON (JavaScript Object Notation) est un format courant pour transporter des données sous forme de texte. Les accolades {} contiennent un objet fait de paires clé-valeur, les crochets [] une liste ordonnée ; les valeurs peuvent être du texte, des nombres, true/false, null, ou à nouveau des objets et des listes. La plupart des services web et des applications envoient leurs données en JSON. C'est un texte lisible, mais sans mise en page visuelle comme un tableau ; pour l'afficher sur une page, il faut le convertir en HTML.

Qu'est-ce que Aplatissement (flatten) ?

Aplatir consiste à ranger chaque valeur d'une structure imbriquée sous une clé à un seul niveau. Le chemin s'écrit en reliant les clés par des points : {"adresse": {"ville": "Oran"}} devient adresse.ville = Oran. Des données imbriquées tiennent ainsi dans un tableau de lignes et de colonnes. L'aplatissement ne perd aucune information, mais avec des structures très profondes ou riches en champs, il multiplie vite les colonnes ; un tableau interne est alors plus lisible.

Quelle différence entre JSON vers CSV et JSON vers tableau HTML ?

Les deux rangent les enregistrements JSON en lignes et en colonnes, mais le résultat ne va pas au même endroit. Le CSV ne contient que des données ; il sert à ouvrir le tout dans Excel ou à l'importer dans un autre programme, sans aucune mise en page. Le tableau HTML est du code fait de balises ; il s'affiche directement sur une page web, dans un article de blog ou dans un e-mail HTML, et peut contenir des cellules d'en-tête et des tableaux internes. Pour travailler les données, choisissez le CSV ; pour les montrer, le tableau HTML.

Aplatir ou tableau interne

Aplatir fait de chaque champ d'un objet imbriqué une colonne à part, avec des points : {"adresse": {"ville": "Casablanca"}} écrit Casablanca dans une colonne adresse.ville. Le tableau reste sur un seul niveau, se trie par colonne, et les cellules tombent au bon endroit quand on le copie dans Excel. C'est le bon choix dans la plupart des cas.

Le tableau interne garde la structure imbriquée : un petit tableau avec les lignes ville et quartier est dessiné dans la cellule adresse. Quand les enregistrements portent des sous-objets de profondeur variable ou riches en champs (comme la liste des articles d'une commande), le tableau interne reste lisible là où l'aplatissement créerait des dizaines de colonnes. Dans ce mode, les tableaux d'objets deviennent aussi des tableaux internes.

• {"adresse": {"ville": "Casablanca"}} → aplatir : colonne adresse.ville
• [{"a":1},{"b":2}] → colonnes a et b, les trous restent vides
• « <b>nouveau</b> » → &lt;b&gt;nouveau&lt;/b&gt; (pas de gras)

Échappement : pourquoi le texte JSON n'est pas collé tel quel

Les données JSON viennent souvent d'une API ou d'un formulaire rempli par des utilisateurs. Si un champ contient un texte comme <script> ou <img onerror=...> et que ce texte arrive sur la page sans échappement, du code peut s'exécuter dans le navigateur du visiteur ; c'est ce qu'on appelle le cross-site scripting (XSS). Cet outil échappe chaque clé et chaque valeur avec la bibliothèque he : <, >, &, guillemets et apostrophes deviennent des entités.

Le texte échappé s'affiche exactement pareil ; la seule chose perdue est la possibilité qu'il soit lu comme du code. Pour mettre le tableau en forme, laissez le code tel quel et écrivez des règles CSS pour table, th et td dans votre site ; avec un thème prêt à l'emploi, le tableau prend déjà l'apparence du thème.

Questions fréquentes

Comment convertir du JSON en tableau HTML ?

Collez le JSON dans le panneau de gauche. Pour un tableau d'objets, chaque objet devient une ligne et chaque clé une colonne ; un objet seul donne un tableau Champ/Valeur. Copiez le code de droite dans l'éditeur HTML de votre page.

Que se passe-t-il si les enregistrements ont des champs différents ?

Les colonnes réunissent les clés de tous les enregistrements, dans l'ordre de leur première apparition. Un champ absent reçoit une cellule vide ; aucune valeur ne se décale ni ne tombe sous la mauvaise colonne.

À quoi ressemble du JSON imbriqué dans le tableau ?

Avec « Objets imbriqués » sur « Aplatir », vous obtenez des noms de colonnes avec point comme adresse.ville. Avec « Tableau interne », les objets imbriqués et les listes d'objets sont écrits dans un petit tableau à part, à l'intérieur de la cellule.

Les données collées sont-elles envoyées quelque part ?

Non. La conversion se fait entièrement dans votre navigateur ; même une liste de clients ou une réponse d'API ne quitte pas cette page.