Converti JSON in HTML

Un browser, un sistema di documentazione o un sito web statico può richiedere HTML per visualizzare i dati JSON come una pagina leggibile anziché come testo strutturato non elaborato. La conversione può anche produrre un report offline stampabile e condivisibile, ma il risultato richiede un modello di layout perché JSON memorizza i dati e HTML definisce la presentazione.

Cosa contiene JSON

JSON (JavaScript Object Notation) è un formato di testo semplice composto da oggetti, array, stringhe, numeri, valori booleani e null. API, file di configurazione, database, strumenti di esportazione, applicazioni JavaScript e servizi come GitHub lo usano comunemente. JSON rappresenta valori e relazioni; non definisce il layout della pagina, i colori, la navigazione, le tabelle o il comportamento del browser.

Cosa fornisce HTML

HTML (HyperText Markup Language) è il formato dei documenti visualizzato dai browser web. Elementi come <h1>, <p>, <table> e <ul> definiscono titoli, paragrafi, tabelle ed elenchi. CSS può controllare l'aspetto e HTML può includere link, immagini, stili di stampa e script lato client. Un file HTML generato può essere aperto offline e allegato alla documentazione, anche se non fornisce automaticamente le funzioni di ricerca, ordinamento, grafici o autenticazione di un'applicazione web.

Convertire con uno script Python locale

Uno script locale è adatto ai dati sensibili e alle conversioni ripetibili. Mantiene gli oggetti e gli array annidati, scrive HTML in UTF-8 ed esegue l'escape dei valori in modo che il testo JSON non possa diventare markup eseguibile.

1. Installare Python 3.
2. Creare json_to_html.py nella cartella contenente il file di origine.
3. Incollare questo 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. Eseguire lo script:

python json_to_html.py data.json data.html

Aprire data.html in un browser. Modificare il CSS nello script per cambiare spaziatura, caratteri, colori o larghezza. Per i record che richiedono colonne, sostituire il renderer ricorsivo generico con un modello che associ i campi noti agli elementi <th> e <td>; un renderer generico non può determinare le colonne o l'ordine desiderati.

Usare strumenti online e desktop

Per un file occasionale non sensibile, un servizio basato su browser come il convertitore JSON-to-HTML di Code Beautify può generare HTML senza installare software. Controllare l'output del servizio e la relativa informativa sulla privacy e non caricare password, token API, informazioni personali o record riservati. Un editor desktop come VS Code o JSONBuddy può formattare e convalidare JSON prima della conversione, ma un editor da solo non crea un design HTML significativo a partire da dati arbitrari. Usare lo script Python o un modello HTML personalizzato per ottenere un output locale e ripetibile.

Gestire separatamente i backup dei segnalibri di Firefox

I backup dei segnalibri di Firefox usano JSON, ma non sono normali esportazioni di dati destinate alla visualizzazione diretta come pagina web. Chrome generalmente importa i segnalibri in HTML, non nel formato di backup JSON di Firefox. In Firefox, ripristinare il backup tramite Bookmarks → Manage bookmarks → Import and Backup → Restore → Choose File, quindi esportare un file di segnalibri interoperabile tramite Import and Backup → Export Bookmarks to HTML. In Chrome, importare il file risultante tramite Bookmark manager → Organize → Import bookmarks. Un convertitore specifico per i segnalibri come Transmute può essere utile nei flussi di lavoro precedenti, ma ripristinare il backup in Firefox ed esportare HTML è la procedura più diretta quando Firefox è disponibile. Rinominare .json in .html non esegue una conversione.

Limiti di qualità e compatibilità

• Non esiste un risultato visivo universale: JSON non ha un design della pagina intrinseco, quindi il modello determina titoli, tabelle, ordine e stile.
• Lo script esegue l'escape del testo con html.escape di Python. Se i valori vengono successivamente inseriti in attributi HTML, CSS o JavaScript, usare anche l'escape appropriato per quel contesto.
• Un JSON non valido causa il fallimento di json.loads. Convalidarlo prima con python -m json.tool data.json o con un validatore JSON affidabile.
• Array molto grandi possono creare pagine lente e di dimensioni eccessive. Filtrare o suddividere in pagine i dati prima della generazione quando contengono migliaia di record.
• L'HTML generato contiene un'istantanea dei dati, non il comportamento dell'applicazione originale. Aggiungere JavaScript o codice lato server per il filtraggio, l'ordinamento, i grafici, gli aggiornamenti in tempo reale o il controllo degli accessi.
• I convertitori online possono modificare la formattazione, omettere strutture non supportate, imporre limiti alle dimensioni dei file o conservare i file caricati. Confrontare la pagina generata con l'origine prima di pubblicarla o archiviarla.