JSON ke HTML

Rekomendasi Terkait

Tentang JSON ke HTML dan Tabel HTML

Kasus penggunaan

• Pengembangan frontend: dengan cepat merender data JSON dari API menjadi tabel HTML untuk disematkan ke dasbor admin atau halaman dokumentasi
• Proyek Tailwind / Bootstrap: rekatkan nama kelas Tailwind atau Bootstrap langsung ke bidang kelas tabel untuk integrasi mulus dengan sistem gaya yang ada
• Halaman web responsif: pembungkus gulir horizontal default mencegah tabel seluler merusak tata letak halaman
• Tampilan visualisasi data: rekatkan tabel bergaya ke blog, dokumentasi, Confluence, Notion, atau platform apa pun yang mendukung penyematan HTML
• Pembuatan laporan: dengan cepat mengonversi data JSON yang diekspor dari backend menjadi laporan email HTML untuk pemangku kepentingan bisnis
• Prototyping frontend: pratinjau gaya tabel dengan data nyata selama fase desain untuk selaras dengan produk dan desain sebelum pengiriman
• Sistem CMS: buat cuplikan tabel HTML statis untuk WordPress, Drupal, dan platform CMS lainnya, menghindari kompleksitas mesin templat
• Pengujian dan debugging: rekatkan output JSON.stringify dari konsol browser untuk dengan cepat mempratinjau struktur dua dimensi dari data bersarang yang kompleks
• Template email: sematkan HTML tabel ke email HTML (uji kompatibilitas Outlook)
• Penulisan dokumentasi API: sematkan tabel HTML di Markdown, Swagger, Redoc sebagai pengganti contoh JSON default
• Skenario pengajaran: konversi tugas JSON bersarang dalam kursus struktur data menjadi tabel untuk tampilan penilaian batch
• Laporan pembersihan data: gunakan mode Perataan untuk mengonversi JSON bersarang dari ekspor basis data menjadi tabel untuk perbandingan bidang yang mudah

Cara Penggunaan

1. Tempel larik JSON (disarankan) atau objek tunggal ke editor kiri, atau klik "Sample" untuk memuat 3 contoh produk, atau klik "Upload" untuk memuat file .json / .txt
2. Pilih mode pemrosesan bersarang di toolbar (disarankan: "Perataan"). Objek bersarang secara otomatis diperluas menjadi kunci bertitik seperti `user.name`
3. Klik tombol "Convert" (atau cukup tekan Enter) untuk memicu konversi. Input dilindungi dengan debounce 500ms
4. Beralih ke tab Code di kanan untuk melihat kode tabel HTML dengan penyorotan sintaks, atau tab Preview untuk melihat rendering iframe waktu nyata
5. Aktifkan opsi gaya di toolbar (belang-belang / batas / hover / ringkas / responsif), masukkan kelas tabel kustom, atur placeholder null — pratinjau langsung diperbarui secara instan
6. Setelah puas, klik "Copy" untuk menyalin kode HTML atau "Download" untuk menyimpan sebagai table.html. Klik Reset jika Anda perlu memulai dari awal

Fitur

• Perataan otomatis objek bersarang: memperluas `{user:{name,age}}` secara rekursif menjadi kunci bertitik `user.name`, `user.age` (pemisah dapat dikonfigurasi), tanpa skrip manual
• Tiga mode pemrosesan bersarang: Perataan (Disarankan, auto-expand hingga 6 level) / Kunci Tingkat Atas (objek bersarang sebagai satu kolom) / String (objek bersarang sebagai string JSON)
• Hook kelas CSS kustom: menyuntikkan string kelas apa pun ke `<table>` dan pembungkus `<div>` opsional, terintegrasi mulus dengan Tailwind / Bootstrap / Bulma
• Pengguliran horizontal responsif: pembungkus luar `overflow-x:auto` secara default, bilah gulir horizontal muncul otomatis di layar sempit
• 6 toggle gaya visual: belang-belang, batas, sorotan baris, mode ringkas, kolom indeks pertama (#), keterangan tabel — diterapkan instan dari kotak centang toolbar
• Tab ganda pratinjau Code + iframe: tab Code menampilkan sumber HTML dengan penyorotan sintaks, tab Preview merender tabel nyata di iframe sandbox secara waktu nyata
• Penyorotan berdasarkan tipe: null ditampilkan miring abu-abu (teks placeholder dapat disesuaikan), boolean hijau/merah, angka biru, objek bersarang melihat JSON lengkap saat hover
• Perlindungan batas baris: batas 1000 baris secara default (1-10000 dapat disesuaikan), otomatis memotong dengan pemberitahuan "Terpotong" untuk mencegah browser lambat
• Umpan balik statistik pembuatan: panel kanan menampilkan "Dibuat X baris × Y kolom" + lencana pemotongan secara waktu nyata
• Salin / unduh sekali klik: dalam mode Code, salin sumber HTML ke papan klip, atau unduh sebagai file table.html
• Data sampel + unggah file: 3 sampel produk bawaan (Laptop / Mouse / Desk Chair) dimuat sekali klik, mendukung drag-and-drop atau klik untuk mengunggah file .json / .txt
• Reset sekali klik: tombol Reset pada toolbar langsung mengembalikan semua 14 konfigurasi ke default
• Riwayat lokal: berbasis localStorage, menyimpan 200 input terakhir secara persisten, dapat dipulihkan setelah refresh atau penutupan tab yang tidak disengaja
• Pemrosesan sepenuhnya lokal di browser: semua penguraian JSON, pembuatan HTML, salin dan unduh terjadi di browser Anda, tidak ada data yang diunggah ke server mana pun

Contoh Kode

// 1) Panggil GitHub API untuk mengambil daftar pengguna
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) Fungsi perataan bersarang (setara dengan logika perataan alat)
function flattenObject(obj, prefix = '', sep = '.', result = {}) {
  for (const [k, v] of Object.entries(obj || {})) {
    const key = prefix ? `${prefix}${sep}${k}` : k;
    if (v && typeof v === 'object' && !Array.isArray(v)) {
      flattenObject(v, key, sep, result);
    } else {
      result[key] = v;
    }
  }
  return result;
}

// 3) Konversi data yang diratakan ke tabel HTML, suntikkan kelas Tailwind
function generateHtmlTable(rows) {
  const flat = rows.map(r => flattenObject(r));
  const cols = [...new Set(flat.flatMap(r => Object.keys(r)))];
  const thead = cols.map(c => `<th class="px-4 py-2 text-left">${c}</th>`).join('');
  const tbody = flat.map(r =>
    `<tr class="border-b hover:bg-gray-50">${cols.map(c => `<td class="px-4 py-2">${r[c] ?? 'N/A'}</td>`).join('')}</tr>`
  ).join('');
  return `<table class="min-w-full text-sm">
  <thead class="bg-gray-100"><tr>${thead}</tr></thead>
  <tbody>${tbody}</tbody>
</table>`;
}

// 4) Suntikkan ke halaman
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log('Dibuat ' + users.length + ' baris, ' + (Object.keys(flattenObject(users[0])).length) + ' kolom');

from flask import Flask, jsonify, render_template_string
import json

app = Flask(__name__)

TEMPLATE = """
<!doctype html><html><body>
<div class="overflow-x-auto">{{ table_html | safe }}</div>
</body></html>
"""

def flatten(obj, prefix='', sep='.', result=None):
    """Meratakan objek bersarang secara rekursif"""
    if result is None:
        result = {}
    for k, v in (obj or {}).items():
        key = f"{prefix}{sep}{k}" if prefix else k
        if isinstance(v, dict):
            flatten(v, key, sep, result)
        else:
            result[key] = v
    return result

def json_to_html_table(data, table_class='min-w-full border-collapse',
                        max_rows=1000, responsive=True):
    if isinstance(data, dict):
        data = [data]
    if not data:
        return "<p>Tidak ada data</p>"

    # Pemotongan baris
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # Ratakan setiap baris
    flat_rows = [flatten(row) for row in data]

    # Kumpulkan semua nama kolom (menggunakan set untuk deduplikasi, menjaga urutan penyisipan)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

    # Hasilkan thead
    thead = "".join(f'<th class="px-4 py-2 text-left bg-gray-100">{c}</th>' for c in columns)

    # Hasilkan baris tabel
    rows = []
    for i, row in enumerate(flat_rows):
        bg = "bg-gray-50" if i % 2 == 1 else ""
        tds = "".join(
            f'<td class="px-4 py-2 {bg}">{("N/A" if row.get(c) is None else row.get(c, ""))}</td>'
            for c in columns
        )
        rows.append(f'<tr class="hover:bg-blue-50">{tds}</tr>')

    html = f'<table class="{table_class}"><thead><tr>{thead}</tr></thead><tbody>{"".join(rows)}</tbody></table>'
    if responsive:
        html = f'<div class="overflow-x-auto">{html}</div>'

    if truncated:
        html = f'<p class="text-amber-600 text-sm">Data dipotong ke {max_rows} baris pertama</p>{html}'

    return html


@app.route('/api/users')
def users():
    data = json.load(open('users.json'))
    return jsonify(data)

@app.route('/users.html')
def users_html():
    import requests
    data = requests.get('http://localhost:5000/api/users').json()
    return render_template_string(TEMPLATE, table_html=json_to_html_table(data))


if __name__ == '__main__':
    app.run(debug=True)

# 1) Gunakan jq untuk mengagregat dan meratakan log bersarang menjadi kunci bertitik
cat app.log | jq -s '
  group_by(.response.status_code) |
  map({
    status: .[0].response.status_code,
    count: length,
    "first_request.method": .[0].request.method,
    "last_request.url": .[-1].request.url,
    "first_seen": min_by(.timestamp).timestamp,
    "last_seen": max_by(.timestamp).timestamp
  })
' > stats.json

# 2) Tempelkan stats.json ke alat ini
#    Pilih mode "Perataan (Disarankan)" di toolbar
#    Centang "Belang-belang + Pembungkus Responsif + Batas"
#    Di nama kelas tabel masukkan: min-w-full text-sm border-collapse
#    Atur placeholder null: - (bidang yang hilang ditampilkan sebagai -)
#    Atur Keterangan: Statistik Log Error Produksi 2026-07
#    Klik Convert lalu unduh table.html

# 3) Unggah ke situs statis S3 / OSS
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# Atau sematkan ke dokumentasi Confluence / Notion / VuePress
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# Atau kirim sebagai email HTML
mutt -e "set content_type=text/html" -s "Log Error 2026-07" your@email.com < table.html

Pertanyaan Umum

Pemecahan Masalah

Glosarium

Tabel HTML (HTML Table)

Elemen tampilan data terstruktur standar W3C, terdiri dari tag semantik table / thead / tbody / tr / th / td / caption. Kode yang dihasilkan oleh alat ini secara ketat mengikuti struktur ini.

Larik JSON

Kumpulan objek yang dibungkus dalam tanda kurung siku [...]. Alat menggunakan setiap objek dalam larik sebagai baris tabel; larik kosong tidak menghasilkan tabel (pemberitahuan ditampilkan).

Objek JSON

Kumpulan pasangan kunci-nilai yang dibungkus dalam tanda kurung kurawal {}. Alat menggunakan setiap kunci objek sebagai header tabel dan nilai sebagai sel; objek tunggal secara otomatis dibungkus sebagai tabel satu baris.

Perataan (Flatten)

Memperluas objek bersarang secara rekursif menjadi kunci datar bertitik, mis. {user:{name:'A'}} → 'user.name'. Alat mendukung perataan otomatis 6 level dengan pemisah yang dapat dikonfigurasi.

thead / tbody

Dua partisi semantik tabel HTML: thead membungkus baris header (th), tbody membungkus baris data (td). Kode yang dihasilkan alat secara tegas membedakan kedua bagian ini.

Caption

Tag judul tabel, terletak di baris pertama di dalam tabel. Alat mendukung teks caption kustom; saat diaktifkan, judul yang ditentukan ditampilkan di atas tabel, yang berguna untuk SEO dan aksesibilitas.

Belang-belang (Zebra Striping)

Pola visual di mana baris ganjil dan genap bergantian menggunakan warna latar belakang yang berbeda, umumnya kombinasi #fff / #f9fafb. Alat mengaktifkan ini melalui kotak centang "Belang-belang", secara signifikan meningkatkan keterbacaan untuk tabel panjang.

Gaya Inline (Inline Style)

Menulis CSS langsung melalui atribut style dari tag HTML, daripada merujuk ke stylesheet eksternal. Alat mengeluarkan semua gaya sebagai gaya inline secara default, sehingga kode dapat digunakan apa adanya tanpa file CSS tambahan.

Hook kelas CSS

Kemampuan diferensial alat: menyuntikkan string kelas apa pun (seperti kelas Tailwind) pada tag `<table>`, terintegrasi mulus dengan framework CSS yang ada. Ini adalah upgrade utama atas pesaing.

iframe sandbox

Mode sandbox aman dari tag HTML iframe, yang dapat membatasi eksekusi skrip dan pengiriman formulir. Alat menggunakan iframe dengan sandbox="allow-same-origin" untuk mempratinjau HTML yang dihasilkan, mencegah eksekusi skrip yang tidak disengaja.

Penyorotan berdasarkan tipe

Kemampuan diferensial alat: menerapkan warna berbeda berdasarkan tipe JS dari nilai sel (null / boolean / number / object / string), membuat debugging data API lebih intuitif.

Riwayat localStorage

Penyimpanan kunci-nilai lokal yang disediakan oleh browser (kapasitas ~5-10MB). Alat menggunakan localStorage untuk menyimpan 200 input terakhir secara persisten, yang dapat dengan cepat dipulihkan setelah refresh atau penutupan tab yang tidak disengaja.

Pembungkus Responsif (Responsive Wrapper)

Membungkus tabel dalam `<div style="overflow-x:auto;max-width:100%;">` luar sehingga tabel secara otomatis mendapatkan bilah gulir horizontal di layar sempit. Alat mengaktifkannya secara default; dapat dimatikan di toolbar.

Debounce

Teknik optimasi kinerja frontend: menggabungkan callback事件 frekuensi tinggi (seperti input) menjadi satu eksekusi setelah pemicu terakhir. Alat menetapkan debounce 500ms untuk menghindari kelambatan dari penguraian file besar.

W3C HTML5

Spesifikasi standar HTML yang dibuat oleh World Wide Web Consortium (W3C). Kode yang dihasilkan alat sesuai dengan spesifikasi HTML5 dan dirender dengan benar di semua browser modern.

Perbandingan Tiga Mode Pemrosesan Bersarang

Toolbar menyediakan tiga mode untuk skenario bersarang yang berbeda. Pilih berdasarkan kompleksitas struktur JSON Anda:

Lembar Cheat 14 Opsi Konfigurasi Toolbar

Semua 14 opsi konfigurasi di toolbar dan perbedaan visualnya, untuk pemilihan kombinasi yang cepat:

Lembar Cheat Aturan Penyorotan Sel Berdasarkan Tipe

Alat secara otomatis menerapkan warna berbeda berdasarkan tipe JavaScript dari nilai JSON untuk pengenalan tipe data yang cepat:

Privacy & Security

Alat JSON ke HTML ini menjalankan semua penguraian JSON, perataan bersarang, pembuatan HTML, salin, dan operasi unduh sepenuhnya di browser Anda melalui JavaScript. Data JSON masukan dan kode HTML yang dihasilkan tidak diunggah ke server mana pun, juga tidak dicatat, di-cache, atau disimpan di cloud. Anda dapat dengan aman menggunakan alat ini dengan respons API sensitif yang belum dirilis dan bidang bisnis internal — menutup halaman akan menghapus semua data.

Authoritative References

• MDNMDN — Elemen HTML <table>
• MDNMDN — Dasar-dasar Tabel HTML
• W3CSpesifikasi W3C HTML5 — elemen table
• MDNMDN — atribut iframe sandbox
• MDNMDN — JSON.parse / JSON.stringify
• TailwindTailwind CSS — Gaya Tabel
• BootstrapBootstrap — Tabel