Konverter Gratis

Penampil Pohon JSON

Lihat, format, dan jelajahi data JSON dalam pohon interaktif yang dapat dilipat. Gratis, aman, dan tanpa perlu unggah.

Seret & Letakkan file JSON di sini

Atau tempel teks JSON di bawah

Atau

Tentang alat ini

Penampil pohon JSON menampilkan data JSON sebagai pohon hierarki yang dapat dinavigasi, bukan sebagai teks biasa. Setiap objek menjadi cabang yang bisa dilipat; array menampilkan itemnya satu per satu; nilai-nilai primitif muncul sebagai daun. Tampilan struktural memudahkan untuk menemukan bidang tertentu dalam data yang sangat bertumpuk, menciutkan subpohon yang tidak relevan, dan menavigasi dokumen JSON besar yang tidak dapat dikelola sebagai teks datar.

Dibandingkan dengan teks JSON yang diformat, tampilan hierarki unggul dalam navigasi dalam data besar. Respons API 10MB tidak praktis untuk digulir sebagai teks tetapi dapat ditiru sebagai pohon tempat Anda menciutkan kunci tingkat atas yang tidak Anda pedulikan dan hanya memperluas bagian yang diinginkan.

Penampil ini merender JSON dalam pohon terstruktur di browser Anda. Filter pencarian bercabang berdasarkan kunci atau nilai. Tampilan sadar tipe membedakan string, angka, boolean, null, objek, dan array.

Mengapa Menggunakan Penampil Pohon JSON

Data yang sangat bertumpuk sulit dinavigasi sebagai teks. File konfigurasi, respons API, dan status serial sering kali memiliki 5+ tingkat sarang. Tampilan hierarki memungkinkan Anda menciutkan level yang tidak relevan dan fokus pada hal yang penting; tampilan teks memerlukan pengguliran dan penghitungan tanda kurung yang cermat.

Kemampuan pencarian dan filter juga penting. Menemukan semua kunci bernama 'user_id' di seluruh dokumen kompleks dapat dilakukan dengan cepat menggunakan penampil yang peka terhadap pencarian; mustahil dilakukan secara andal dengan teks biasa.

Cara menggunakan

Tempel JSON, navigasikan pohonnya.

  1. Tempelkan JSON Anda: Letakkan JSON ke area input. Penampil mem-parsing dan merender pohon terstruktur.
  2. Perluas dan ciutkan: Klik cabang untuk memperluas atau menciutkan. Berguna untuk memfokuskan pada subpohon tertentu dari data besar.
  3. Cari: Filter berdasarkan kunci atau nilai. Cabang yang cocok tetap terlihat; yang tidak cocok disembunyikan.
  4. Periksa nilai-nilai tertentu: Klik pada daun untuk melihat nilai penuhnya (berguna untuk string panjang) dan salin jalurnya (misalnya, pengguna.0.profil.email) untuk digunakan dalam kode.

Kasus Penggunaan Umum

Detail Teknis

Penguraian JSON menggunakan JSON.parse, yang gagal pada masukan yang tidak valid dengan kesalahan penguraian yang menunjuk ke lokasi masalah. JSON yang valid dirender menjadi objek JavaScript yang dilalui pemirsa secara rekursif untuk menghasilkan pohon.

Rendering: setiap tingkat sarang menjadi cabang yang menjorok ke dalam. Kunci objek adalah label; nilai dirender berdasarkan tipe — string dalam tanda kutip, angka tanpa, boolean sebagai benar/salah, null secara eksplisit, objek dan array sebagai cabang yang dapat dilipat.

Performa: JSON yang sangat besar (10MB+) dapat memperlambat rendering. Ekspansi yang lambat (hanya menampilkan cabang yang terlihat saat ini) membantu. Pencarian dokumen berukuran besar mungkin memerlukan waktu yang cukup lama; mengindeks pohon pada parse pertama membantu.

Praktik Terbaik

Pertanyaan yang sering diajukan

Seberapa dalamkah pohon JSON?
Tidak ada batasan kedalaman buatan. Alat ini merender pohon sedalam struktur JSON Anda. Namun, sarang yang sangat dalam (level 100+) dapat memperlambat rendering di browser.
Bisakah saya mencari di dalam pohon JSON?
Gunakan Ctrl/Cmd+F untuk mencari kunci atau nilai. Node yang cocok akan disorot dan node induknya secara otomatis diperluas untuk menunjukkan jalurnya.
Format jalur JSON apa yang digunakan?
Alat ini menggunakan notasi titik JSONPath ($.key.nested.array[0].value). Format ini kompatibel dengan akses properti JavaScript dan sebagian besar perpustakaan JSONPath.
Bisakah saya mengedit nilai di pohon?
Ini adalah penampil baca-saja untuk eksplorasi. Untuk mengedit JSON, gunakan alat JSON Formatter kami yang menyediakan antarmuka yang dapat diedit dengan validasi.
Apakah data saya sudah diunggah?
Tidak. Parsing dan rendering terjadi di browser Anda.
Bagaimana cara mengekspor sebagian pohon?
Sebagian besar pemirsa menawarkan copy-as-JSON untuk cabang tertentu. Nilai yang diekspor memiliki struktur yang sama hanya dengan kunci yang dipilih.
Mengapa pohonnya lambat dengan data yang besar?
Rendering DOM pada banyak node membutuhkan biaya yang mahal. Ekspansi yang lambat (hanya menampilkan cabang yang terlihat) membantu; untuk data yang sangat besar, alat khusus (jq, kode) lebih efisien.
Bisakah saya melihat JSON dari URL?
Beberapa pemirsa mengambil URL secara langsung. Yang lain perlu ditempel. CORS dapat mencegah pengambilan lintas asal dari beberapa URL.