Převod souboru JSON do HTML

Prohlížeč, systém dokumentace nebo statický web může vyžadovat, aby HTML zobrazovalo data JSON jako stránku se snadno čitelným obsahem namísto nezpracovaného strukturovaného textu. Převod může také vytvořit tisknutelný a sdílitelný offline report, výsledek však vyžaduje šablonu rozvržení, protože JSON ukládá data a HTML definuje prezentaci.

Co obsahuje JSON

JSON (JavaScript Object Notation) je prostý textový formát tvořený objekty, poli, řetězci, čísly, logickými hodnotami a null. Běžně jej používají API, konfigurační soubory, databáze, exportní nástroje, aplikace JavaScript a služby jako GitHub. JSON reprezentuje hodnoty a vztahy; nedefinuje rozvržení stránky, barvy, navigaci, tabulky ani chování prohlížeče.

Co poskytuje HTML

HTML (HyperText Markup Language) je formát dokumentu vykreslovaný webovými prohlížeči. Prvky jako <h1>, <p>, <table> a <ul> definují nadpisy, odstavce, tabulky a seznamy. CSS může řídit vzhled a HTML může obsahovat odkazy, obrázky, styly pro tisk a skripty na straně klienta. Vygenerovaný soubor HTML lze otevřít offline a připojit k dokumentaci, automaticky však neposkytuje vyhledávání, řazení, grafy ani ověřování uživatelů webové aplikace.

Převod pomocí místního skriptu Python

Místní skript je vhodný pro citlivá data a opakované převody. Zachovává vnořené objekty a pole, zapisuje HTML v kódování UTF-8 a escapuje hodnoty, takže se text JSON nemůže stát spustitelným značkováním.

1. Nainstalujte Python 3.
2. Vytvořte soubor json_to_html.py ve složce obsahující zdrojový soubor.
3. Vložte do něj tento skript:

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. Spusťte skript:

python json_to_html.py data.json data.html

Otevřete data.html v prohlížeči. Úpravou CSS ve skriptu můžete změnit mezery, písma, barvy nebo šířku. U záznamů, které potřebují sloupce, nahraďte obecný rekurzivní renderer šablonou, která mapuje známá pole na prvky <th> a <td>; obecný renderer nedokáže odvodit požadované sloupce ani jejich pořadí.

Použití online a desktopových nástrojů

U jednorázového souboru, který neobsahuje citlivá data, může služba v prohlížeči, například převodník JSON-to-HTML od Code Beautify, vygenerovat HTML bez instalace softwaru. Zkontrolujte výstup služby a její zásady ochrany soukromí a nenahrávejte hesla, tokeny API, osobní údaje ani důvěrné záznamy. Desktopový editor, například VS Code nebo JSONBuddy, může před převodem formátovat a ověřit JSON, samotný editor však z libovolných dat nevytvoří smysluplný návrh HTML. Pro místní a opakovaně použitelný výstup použijte skript Python nebo vlastní šablonu HTML.

Zpracování záloh záložek Firefoxu odděleně

Zálohy záložek Firefoxu používají JSON, nejde však o běžné exporty dat určené k přímému zobrazení jako webová stránka. Chrome obecně importuje záložky ve formátu HTML, nikoli ve formátu JSON zálohy Firefoxu. Ve Firefoxu obnovte zálohu prostřednictvím Bookmarks → Manage bookmarks → Import and Backup → Restore → Choose File a poté exportujte kompatibilní soubor záložek prostřednictvím Import and Backup → Export Bookmarks to HTML. V Chromu importujte výsledný soubor prostřednictvím Bookmark manager → Organize → Import bookmarks. Specializovaný převodník záložek, například Transmute, může pomoci při starších postupech, ale pokud je Firefox k dispozici, je přímější cestou obnovení zálohy ve Firefoxu a export HTML. Přejmenování .json na .html převod neprovede.

Omezení kvality a kompatibility

• Neexistuje univerzální vizuální výsledek: JSON nemá vlastní návrh stránky, takže šablona určuje nadpisy, tabulky, pořadí a stylování.
• Skript escapuje text pomocí html.escape z Pythonu. Pokud jsou hodnoty později vkládány do atributů HTML, CSS nebo JavaScriptu, použijte také escapování vhodné pro daný kontext.
• Neplatný JSON způsobí selhání funkce json.loads. Nejprve jej ověřte pomocí python -m json.tool data.json nebo důvěryhodného validátoru JSON.
• Velmi rozsáhlá pole mohou vytvářet pomalé a nadměrně velké stránky. Pokud obsahují tisíce záznamů, před generováním data filtrujte nebo stránkujte.
• Vygenerované HTML obsahuje snímek dat, nikoli chování původní aplikace. Pro filtrování, řazení, grafy, živé aktualizace nebo řízení přístupu přidejte JavaScript nebo kód na straně serveru.
• Online převodníky mohou měnit formátování, vynechávat nepodporované struktury, omezovat velikost souboru nebo uchovávat nahrané soubory. Před zveřejněním nebo archivací porovnejte vygenerovanou stránku se zdrojovými daty.