Convertir JSON en HTML

Un navigateur, un système de documentation ou un site web statique peut nécessiter du HTML pour afficher des données JSON sous forme de page lisible plutôt que de texte structuré brut. La conversion peut également produire un rapport hors ligne imprimable et partageable, mais le résultat nécessite un modèle de mise en page, car JSON stocke les données et HTML définit la présentation.

Contenu de JSON

JSON (JavaScript Object Notation) est un format en texte brut composé d’objets, de tableaux, de chaînes, de nombres, de valeurs booléennes et de null. Les API, les fichiers de configuration, les bases de données, les outils d’exportation, les applications JavaScript et les services tels que GitHub l’utilisent couramment. JSON représente des valeurs et des relations ; il ne définit pas la mise en page, les couleurs, la navigation, les tableaux ni le comportement du navigateur.

Fonctionnalités de HTML

HTML (HyperText Markup Language) est le format de document rendu par les navigateurs web. Des éléments tels que <h1>, <p>, <table> et <ul> définissent les titres, les paragraphes, les tableaux et les listes. CSS peut contrôler l’apparence, et HTML peut inclure des liens, des images, des styles d’impression et des scripts côté client. Un fichier HTML généré peut être ouvert hors ligne et joint à une documentation, bien qu’il ne fournisse pas automatiquement les fonctions de recherche, de tri, de création de graphiques ou d’authentification d’une application web.

Convertir avec un script Python local

Un script local convient aux données sensibles et aux conversions répétables. Il préserve les objets et les tableaux imbriqués, écrit du HTML en UTF-8 et échappe les valeurs afin que le texte JSON ne puisse pas devenir du balisage exécutable.

1. Installez Python 3.
2. Créez json_to_html.py dans le dossier contenant le fichier source.
3. Collez ce script :

import json
import sys
from html import escape
from pathlib import Path

def render(value):
    if isinstance(value, dict):
        items = ''.join(
            f'<dt>{escape(str(key))}</dt><dd>{render(item)}</dd>'
            for key, item in value.items()
        )
        return f'<dl>{items}</dl>'
    if isinstance(value, list):
        items = ''.join(f'<li>{render(item)}</li>' for item in value)
        return f'<ol>{items}</ol>'
    if value is None:
        value = 'null'
    elif isinstance(value, bool):
        value = str(value).lower()
    return f'<span>{escape(str(value))}</span>'

source, destination = sys.argv[1], sys.argv[2]
data = json.loads(Path(source).read_text(encoding='utf-8'))
page = f'''<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JSON data</title>
  <style>body{{font:16px system-ui;max-width:900px;margin:2rem auto;padding:0 1rem}}dt{{font-weight:700;margin-top:.75rem}}dd{{margin-left:1.5rem}}li{{margin:.35rem 0}}</style>
</head>
<body>{render(data)}</body>
</html>'''
Path(destination).write_text(page, encoding='utf-8')

4. Exécutez le script :

python json_to_html.py data.json data.html

Ouvrez data.html dans un navigateur. Modifiez le CSS dans le script pour changer l’espacement, les polices, les couleurs ou la largeur. Pour les enregistrements qui nécessitent des colonnes, remplacez le moteur de rendu récursif générique par un modèle qui associe les champs connus aux éléments <th> et <td> ; un moteur de rendu générique ne peut pas déduire les colonnes souhaitées ni leur ordre.

Utiliser des outils en ligne et de bureau

Pour un fichier ponctuel non sensible, un service basé sur un navigateur tel que le convertisseur JSON-to-HTML de Code Beautify peut générer du HTML sans installer de logiciel. Vérifiez la sortie du service ainsi que sa politique de confidentialité, et ne téléversez pas de mots de passe, de jetons d’API, d’informations personnelles ou d’enregistrements confidentiels. Un éditeur de bureau tel que VS Code ou JSONBuddy peut formater et valider JSON avant la conversion, mais un éditeur seul ne crée pas une conception HTML pertinente à partir de données arbitraires. Utilisez le script Python ou un modèle HTML personnalisé pour obtenir une sortie locale et répétable.

Gérer séparément les sauvegardes de marque-pages Firefox

Les sauvegardes de marque-pages Firefox utilisent JSON, mais il ne s’agit pas d’exportations de données ordinaires destinées à être affichées directement comme une page web. Chrome importe généralement les marque-pages au format HTML, et non au format de sauvegarde JSON de Firefox. Dans Firefox, restaurez la sauvegarde via Bookmarks → Manage bookmarks → Import and Backup → Restore → Choose File, puis exportez un fichier de marque-pages interopérable via Import and Backup → Export Bookmarks to HTML. Dans Chrome, importez le fichier obtenu via Bookmark manager → Organize → Import bookmarks. Un convertisseur spécialisé pour les marque-pages, tel que Transmute, peut être utile pour les anciennes procédures, mais restaurer la sauvegarde dans Firefox puis exporter du HTML constitue la méthode la plus directe lorsque Firefox est disponible. Renommer .json en .html n’effectue pas une conversion.

Limites de qualité et de compatibilité

• Il n’existe pas de résultat visuel universel : JSON n’a pas de conception de page intrinsèque ; le modèle détermine donc les titres, les tableaux, l’ordre et le style.
• Le script échappe le texte avec html.escape de Python. Si les valeurs sont ensuite insérées dans des attributs HTML, du CSS ou du JavaScript, utilisez également un échappement adapté à ce contexte.
• Un JSON mal formé provoque l’échec de json.loads. Validez-le d’abord avec python -m json.tool data.json ou un validateur JSON fiable.
• Les tableaux très volumineux peuvent produire des pages lentes et excessivement lourdes. Filtrez ou paginez les données avant la génération lorsqu’elles contiennent des milliers d’enregistrements.
• Le HTML généré contient un instantané des données, et non le comportement de l’application d’origine. Ajoutez du JavaScript ou du code côté serveur pour le filtrage, le tri, les graphiques, les mises à jour en temps réel ou le contrôle d’accès.
• Les convertisseurs en ligne peuvent modifier le formatage, omettre les structures non prises en charge, imposer des limites de taille de fichier ou conserver les fichiers téléversés. Comparez la page générée avec la source avant de la publier ou de l’archiver.