JSON en tableau HTML
Affichez une liste d'enregistrements sous forme de tableau lisible d'un coup d'œil : dans l'exemple, Ada et Luis deviennent deux lignes sous les titres de colonne nombre et rol, et le texte Luis <b> reste du texte au lieu de mettre la page en gras. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Tout se passe dans votre navigateur : gratuit, sans envoi de vos données.
Les clés forment les colonnes, chaque objet une ligne. Pratique pour publier des données sans les ressaisir à la main.
Pourquoi on lit des tableaux plutôt que des données brutes
En dehors d'une équipe de développement, personne n'a envie de lire des données brutes, même bien indentées, alors que la même liste d'enregistrements se comprend d'un coup d'œil sous forme de tableau. Une liste de commandes, les réponses d'un questionnaire ou un inventaire arrivent d'un système sous forme de données, et tôt ou tard quelqu'un doit les regarder. Construire le tableau à la main pour chaque rapport est fastidieux et source d'erreurs, surtout quand certains enregistrements ont des champs que d'autres n'ont pas. Cet outil le construit en une seule étape.
Comment le tableau est construit
Chaque nom distinct présent dans les enregistrements devient une colonne avec son en-tête, et chaque enregistrement une ligne ; une valeur absente d'un enregistrement laisse une cellule vide, si bien que le tableau garde sa forme. Les caractères spéciaux sont écrits de façon sûre, c'est pourquoi Luis <b> apparaît dans l'exemple comme du texte. Une valeur qui contient une section imbriquée s'affiche sous sa forme écrite dans la cellule. Le résultat est un tableau simple sans style propre : il prend l'apparence de la page ou de l'e-mail où vous le collez. Pour des données non tabulaires, l'option liste présente chaque enregistrement à part.
Du tableau de données au tableau HTML
Vous obtenez un bloc de code HTML valide, avec les balises de tableau attendues, que vous n’avez plus qu’à coller. Fini le tableau construit cellule par cellule dans l’éditeur, avec le risque d’oublier ou de décaler une valeur.
Un balisage propre à styliser
Le tableau produit s’appuie sur une structure HTML standard, sans mise en forme imposée, pour se fondre dans le style de votre site. Vous appliquez ensuite vos propres classes ou votre feuille de style pour l’apparence : bordures, couleurs, alignements. Ce choix garde le résultat léger et adaptable, plutôt que de vous imposer un habillage dont vous devriez ensuite vous débarrasser.
Collez-le où vous voulez
Le HTML obtenu s’insère dans un CMS comme WordPress, dans une page écrite à la main ou dans un e-mail acceptant le format enrichi. Toute la conversion a lieu dans votre navigateur, sur cette page ; vos données ne sont pas envoyées sur un serveur.
Cas d’usage
Insérer un tableau dans une lettre d’information
Sophie Nguyen intègre un récapitulatif de données dans une newsletter au format enrichi, proprement présenté en tableau.
Questions fréquentes
Le tableau HTML est-il déjà mis en forme ?
Non, il s’appuie sur une structure standard sans style imposé, pour que vous appliquiez vos propres classes et votre feuille de style.
Puis-je coller le résultat dans WordPress ?
Oui. Le code s’insère dans un bloc HTML d’un CMS, dans une page écrite à la main ou dans un e-mail au format enrichi.
Mes données sont-elles envoyées sur un serveur ?
Non, la conversion se fait dans le navigateur ; rien n’est transmis ni conservé.
Comment sont gérées les valeurs manquantes ?
Une clé absente d’un objet laisse simplement une cellule vide dans la ligne correspondante.
Un texte comme <b> dans mes données devient-il une mise en forme ?
Non. Les caractères spéciaux de vos valeurs sont écrits de façon sûre : un nom comme Luis <b> dans l'exemple s'affiche tel quel au lieu de passer le reste du tableau en gras. Cela empêche aussi l'exécution d'un code glissé dans les données.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre stack
curl -X POST https://api.kit.forhosting.com/data/json-to-html \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"json":[{"a":1}]}'const res = await fetch("https://api.kit.forhosting.com/data/json-to-html", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"json": [
{
"a": 1
}
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/data/json-to-html",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"json": [
{
"a": 1
}
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/data/json-to-html", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"json":[{"a":1}]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"json":[{"a":1}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/data/json-to-html", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemple de requête
{
"json": [
{
"a": 1
}
]
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "data.json_to_html",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Limites
max_mb | 25 |
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Cet outil transforme un tableau de données JSON en tableau HTML, avec ses en-têtes et ses lignes, prêt à coller dans une page web, un article ou un e-mail.
Du tableau de données au tableau HTML
Un tableau d’objets JSON se prête bien à un tableau HTML : l’outil relève les clés pour composer la ligne d’en-têtes, puis crée une ligne par objet.
Collez-le où vous voulez
Pour générer ces tableaux automatiquement depuis un flux, un appel programmable existe à $0.002 la requête.
Cas d'intégration
Publier une grille tarifaire
Élodie Garnier tient ses tarifs en JSON et veut les afficher sur son site WordPress. Le tableau HTML se colle directement dans la page, sans ressaisie.
Documenter un jeu de données
Thomas Rousseau convertit un JSON d’exemple en tableau lisible pour l’ajouter à une page de documentation interne.
Questions techniques
L’outil est-il gratuit ?
Oui, sans limite dans le navigateur. L’appel programmable, pour générer ces tableaux en série, coûte $0.002 la requête.
Quelle taille de fichier est acceptée ?
Jusqu’à 25 Mo.