Lewati ke konten

Penampil pohon JSON

Jelajahi JSON sebagai pohon yang dapat diciutkan dan dicari dengan tipe berkode warna, serta klik kunci apa pun untuk menyalin jalur notasi titiknya.

 

Cara kerja

Alat ini menguraikan JSON dan menampilkannya sebagai pohon yang dapat diciutkan, dikodekan berdasarkan warna menurut tipe, string, angka, boolean, atau null, dengan kotak pencarian yang memfilter kunci dan nilai yang cocok serta tombol salin pada setiap kunci yang menyalin jalur notasi titik lengkapnya, seperti address.city atau tags[0].

  1. Tempelkan JSON

    Objek, larik, atau nilai JSON apa pun yang valid.

  2. Bentangkan, ciutkan, atau cari

    Klik panah untuk menciutkan cabang, atau ketik untuk memfilter.

  3. Klik kunci untuk menyalin jalurnya

    Tempelkan jalur tersebut langsung ke dalam kode Anda.

Membaca pohon

Setiap baris menampilkan sebuah kunci, atau indeks di dalam kurung siku untuk item larik, diikuti dengan nilainya. Objek dan larik menampilkan jumlah anaknya dan dapat diciutkan menjadi satu baris. Jalur yang ditampilkan saat Anda menyalin kunci mengikuti akses properti JavaScript standar: bidang objek bersarang digabungkan dengan titik, address.city, dan indeks larik digabungkan dengan kurung siku, tags[0].

Berjalan di peramban Anda, tanpa batas ukuran yang diberlakukan

Pemrosesan dan perenderan dilakukan sepenuhnya dalam JavaScript di halaman ini; JSON Anda, yang mungkin berisi data pribadi, kunci API, atau struktur internal, tidak pernah diunggah ke mana pun. Tidak ada batas kedalaman atau ukuran yang ditetapkan secara permanen, tetapi dokumen JSON dengan ribuan node dapat memperlambat perenderan halaman karena setiap node menjadi elemen DOM. Untuk file yang sangat besar, silakan ciutkan cabang tingkat atas yang tidak Anda perlukan, atau gunakan kotak pencarian untuk langsung menuju ke sebuah kunci.

Pertanyaan yang sering diajukan

Bagaimana cara menjelajahi objek JSON bersarang yang kompleks secara visual?

Tempelkan JSON ke area masukan, lalu klik Uraikan pohon. Alat ini menampilkan pohon yang cabangnya dapat dibuka atau diciutkan satu per satu. String berwarna hijau, angka biru, boolean kuning jingga, dan nilai null abu-abu miring. Gunakan Buka semua atau Ciutkan semua untuk menelusuri struktur besar dengan cepat, atau ketik di kotak pencarian untuk menyaring kunci dan nilai yang cocok.

Bagaimana cara menyalin jalur ke kunci JSON bersarang?

Klik kunci apa pun, atau indeks array mana pun, dalam tampilan pohon yang dirender. Alat ini menyalin jalur notasi titik lengkapnya, misalnya address.city atau tags[0], ke papan klip Anda. Hal ini sangat berguna saat menulis kode untuk mengakses nilai yang bersarang dalam dan Anda memerlukan jalur yang tepat tanpa menghitung indeks array secara manual atau merangkai nama properti.

Apakah data JSON saya dikirim ke server saat menggunakan penampil pohon JSON?

Tidak. Penguraian dan perenderan sepenuhnya terjadi di peramban Anda menggunakan JavaScript. Data JSON Anda, yang mungkin berisi informasi pribadi, kunci API, atau struktur data internal, tidak pernah diunggah atau dikirim ke mana pun. Alat ini aman digunakan dengan muatan JSON apa pun.

Berapa kedalaman atau ukuran maksimum JSON yang dapat ditangani penampil pohon ini?

Perender pohon tidak memiliki batas kedalaman tetap, tetapi JSON yang sangat besar atau bertingkat dalam, dengan ratusan tingkat atau ribuan simpul, dapat memperlambat halaman karena setiap simpul menghasilkan elemen DOM. Untuk file JSON yang sangat besar, ciutkan simpul tingkat atas dan buka hanya bagian yang diperlukan, atau gunakan kotak pencarian untuk langsung menemukan kunci yang dicari.

Tipe apa saja yang dikenali dan diberi kode warna oleh penampil pohon JSON?

Alat ini mengenali dan memberi kode warna pada empat tipe primitif: string (hijau), angka (biru), boolean (kuning ambar), dan null (abu-abu miring). Array dan objek ditampilkan sebagai cabang yang dapat diciutkan dengan jumlah anak mereka. Hal ini memudahkan Anda menemukan ketidakcocokan tipe, misalnya mengetahui bahwa kolom yang seharusnya berupa angka ternyata adalah string yang dikutip.