Konwertuj JSON na HTML

Przeglądarka, system dokumentacji lub statyczna witryna internetowa może wymagać użycia HTML do wyświetlenia danych JSON jako czytelnej strony zamiast surowego tekstu strukturalnego. Konwersja może również utworzyć możliwy do wydrukowania i udostępnienia raport offline, ale wynik wymaga szablonu układu, ponieważ JSON przechowuje dane, a HTML definiuje sposób ich prezentacji.

Co zawiera JSON

JSON (JavaScript Object Notation) to format zwykłego tekstu złożony z obiektów, tablic, ciągów znaków, liczb, wartości Boolean i null. Powszechnie używają go interfejsy API, pliki konfiguracyjne, bazy danych, narzędzia eksportu, aplikacje JavaScript oraz usługi takie jak GitHub. JSON przedstawia wartości i relacje między nimi; nie definiuje układu strony, kolorów, nawigacji, tabel ani zachowania przeglądarki.

Co zapewnia HTML

HTML (HyperText Markup Language) to format dokumentów renderowany przez przeglądarki internetowe. Elementy takie jak <h1>, <p>, <table> i <ul> definiują nagłówki, akapity, tabele i listy. CSS może kontrolować wygląd, a HTML może zawierać odnośniki, obrazy, style wydruku i skrypty po stronie klienta. Wygenerowany plik HTML można otworzyć offline i dołączyć do dokumentacji, chociaż nie zapewnia on automatycznie wyszukiwania, sortowania, wykresów ani uwierzytelniania dostępnych w aplikacji internetowej.

Konwersja za pomocą lokalnego skryptu Python

Lokalny skrypt nadaje się do poufnych danych i powtarzalnych konwersji. Zachowuje zagnieżdżone obiekty i tablice, zapisuje HTML w UTF-8 oraz stosuje escapanie wartości, dzięki czemu tekst JSON nie może stać się wykonywalnym znacznikiem.

1. Zainstaluj Python 3.
2. Utwórz plik json_to_html.py w folderze zawierającym plik źródłowy.
3. Wklej do niego ten skrypt:

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. Uruchom skrypt:

python json_to_html.py data.json data.html

Otwórz data.html w przeglądarce. Edytuj CSS w skrypcie, aby zmienić odstępy, czcionki, kolory lub szerokość. W przypadku rekordów wymagających kolumn zastąp ogólny rekurencyjny renderer szablonem, który mapuje znane pola na elementy <th> i <td>; ogólny renderer nie może określić pożądanych kolumn ani ich kolejności.

Korzystanie z narzędzi online i desktopowych

W przypadku jednorazowego pliku niezawierającego poufnych danych usługa działająca w przeglądarce, taka jak konwerter JSON-to-HTML firmy Code Beautify, może wygenerować HTML bez instalowania oprogramowania. Sprawdź wynik usługi i jej politykę prywatności. Nie przesyłaj haseł, tokenów API, danych osobowych ani poufnych rekordów. Edytor desktopowy, taki jak VS Code lub JSONBuddy, może formatować i sprawdzać poprawność JSON przed konwersją, ale sam edytor nie tworzy znaczącego projektu HTML z dowolnych danych. Do lokalnego, powtarzalnego generowania użyj skryptu Python lub niestandardowego szablonu HTML.

Osobna obsługa kopii zapasowych zakładek Firefox

Kopie zapasowe zakładek Firefox używają JSON, ale nie są zwykłymi eksportami danych przeznaczonymi do bezpośredniego wyświetlania jako strona internetowa. Chrome zazwyczaj importuje zakładki w formacie HTML, a nie w formacie kopii zapasowej JSON przeglądarki Firefox. W Firefox przywróć kopię zapasową przez Bookmarks → Manage bookmarks → Import and Backup → Restore → Choose File, a następnie wyeksportuj interoperacyjny plik zakładek przez Import and Backup → Export Bookmarks to HTML. W Chrome zaimportuj wynikowy plik przez Bookmark manager → Organize → Import bookmarks. Narzędzie do konwersji zakładek, takie jak Transmute, może pomóc w starszych procedurach, ale przywrócenie kopii zapasowej w Firefox i wyeksportowanie HTML to bardziej bezpośrednia metoda, gdy Firefox jest dostępny. Zmiana nazwy .json na .html nie wykonuje konwersji.

Ograniczenia jakości i zgodności

• Nie istnieje uniwersalny wynik wizualny: JSON nie ma wbudowanego projektu strony, dlatego szablon określa nagłówki, tabele, kolejność i styl.
• Skrypt stosuje escapanie tekstu za pomocą html.escape z Python. Jeśli wartości zostaną później wstawione do atrybutów HTML, CSS lub JavaScript, użyj również escapania odpowiedniego dla danego kontekstu.
• Niepoprawny JSON powoduje niepowodzenie działania json.loads. Najpierw sprawdź jego poprawność za pomocą python -m json.tool data.json lub zaufanego walidatora JSON.
• Bardzo duże tablice mogą powodować powstawanie wolno działających i nadmiernie dużych stron. Jeśli dane zawierają tysiące rekordów, przed wygenerowaniem przefiltruj je lub podziel na strony.
• Wygenerowany HTML zawiera migawkę danych, a nie działanie oryginalnej aplikacji. Dodaj JavaScript lub kod po stronie serwera, aby zapewnić filtrowanie, sortowanie, wykresy, aktualizacje na żywo lub kontrolę dostępu.
• Konwertery online mogą zmieniać formatowanie, pomijać nieobsługiwane struktury, nakładać ograniczenia rozmiaru plików lub przechowywać przesłane pliki. Przed opublikowaniem lub zarchiwizowaniem porównaj wygenerowaną stronę ze źródłem.