Konversi JSON menjadi HTML

Browser, sistem dokumentasi, atau situs web statis mungkin memerlukan HTML untuk menampilkan data JSON sebagai halaman yang mudah dibaca, bukan sebagai teks terstruktur mentah. Mengonversinya juga dapat menghasilkan laporan offline yang dapat dicetak dan dibagikan, tetapi hasilnya memerlukan template tata letak karena JSON menyimpan data dan HTML menentukan presentasi.

Isi JSON

JSON (JavaScript Object Notation) adalah format teks biasa yang terdiri dari objek, array, string, angka, nilai Boolean, dan null. API, file konfigurasi, database, alat ekspor, aplikasi JavaScript, dan layanan seperti GitHub umumnya menggunakannya. JSON merepresentasikan nilai dan hubungan; JSON tidak menentukan tata letak halaman, warna, navigasi, tabel, atau perilaku browser.

Fungsi HTML

HTML (HyperText Markup Language) adalah format dokumen yang dirender oleh web browser. Elemen seperti <h1>, <p>, <table>, dan <ul> menentukan judul, paragraf, tabel, dan daftar. CSS dapat mengontrol tampilannya, dan HTML dapat menyertakan tautan, gambar, gaya cetak, serta skrip sisi klien. File HTML yang dihasilkan dapat dibuka secara offline dan dilampirkan ke dokumentasi, meskipun file tersebut tidak secara otomatis menyediakan pencarian, pengurutan, grafik, atau autentikasi seperti aplikasi web.

Konversi dengan skrip Python lokal

Skrip lokal cocok untuk data sensitif dan konversi berulang. Skrip ini mempertahankan objek dan array bertingkat, menulis HTML UTF-8, serta melakukan escape pada nilai sehingga teks JSON tidak dapat menjadi markup yang dapat dieksekusi.

1. Instal Python 3.
2. Buat json_to_html.py di folder yang berisi file sumber.
3. Tempelkan skrip berikut:

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. Jalankan skrip:

python json_to_html.py data.json data.html

Buka data.html di browser. Edit CSS dalam skrip untuk mengubah jarak, font, warna, atau lebar. Untuk data yang memerlukan kolom, ganti renderer rekursif generik dengan template yang memetakan field yang diketahui ke elemen <th> dan <td>; renderer generik tidak dapat menyimpulkan kolom atau urutan yang diinginkan.

Gunakan alat online dan desktop

Untuk file sekali pakai yang tidak sensitif, layanan berbasis browser seperti konverter JSON-to-HTML Code Beautify dapat menghasilkan HTML tanpa menginstal software. Periksa output dan kebijakan privasi layanan tersebut, serta jangan mengunggah kata sandi, token API, informasi pribadi, atau data rahasia. Editor desktop seperti VS Code atau JSONBuddy dapat memformat dan memvalidasi JSON sebelum konversi, tetapi editor saja tidak dapat membuat desain HTML yang bermakna dari data arbitrer. Gunakan skrip Python atau template HTML khusus untuk output lokal yang dapat diulang.

Tangani backup bookmark Firefox secara terpisah

Backup bookmark Firefox menggunakan JSON, tetapi bukan ekspor data biasa yang ditujukan untuk ditampilkan langsung sebagai halaman web. Chrome umumnya mengimpor bookmark dalam HTML, bukan format backup JSON Firefox. Di Firefox, pulihkan backup melalui Bookmarks → Manage bookmarks → Import and Backup → Restore → Choose File, lalu ekspor file bookmark yang interoperabel melalui Import and Backup → Export Bookmarks to HTML. Di Chrome, impor file yang dihasilkan melalui Bookmark manager → Organize → Import bookmarks. Konverter khusus bookmark seperti Transmute mungkin membantu alur kerja lama, tetapi memulihkan backup di Firefox lalu mengekspor HTML merupakan cara yang lebih langsung jika Firefox tersedia. Mengganti nama .json menjadi .html tidak melakukan konversi.

Batasan kualitas dan kompatibilitas

• Tidak ada hasil visual yang universal: JSON tidak memiliki desain halaman bawaan, sehingga template menentukan judul, tabel, urutan, dan gaya.
• Skrip melakukan escape pada teks dengan html.escape milik Python. Jika nilai nantinya dimasukkan ke atribut HTML, CSS, atau JavaScript, gunakan escape yang sesuai untuk konteks tersebut.
• JSON yang tidak valid menyebabkan json.loads gagal. Validasi terlebih dahulu dengan python -m json.tool data.json atau validator JSON tepercaya.
• Array yang sangat besar dapat menghasilkan halaman yang lambat dan berukuran besar. Filter atau lakukan pagination pada data sebelum pembuatan jika data tersebut berisi ribuan rekaman.
• HTML yang dihasilkan berisi snapshot data, bukan perilaku aplikasi asli. Tambahkan JavaScript atau kode sisi server untuk filtering, pengurutan, grafik, pembaruan langsung, atau kontrol akses.
• Konverter online mungkin mengubah pemformatan, menghilangkan struktur yang tidak didukung, memberlakukan batas ukuran file, atau menyimpan file yang diunggah. Bandingkan halaman yang dihasilkan dengan sumbernya sebelum menerbitkan atau mengarsipkannya.