Bahasa
English English Vietnamese (Tiếng Việt) Vietnamese (Tiếng Việt) Chinese (简体中文) Chinese (简体中文) Portuguese (Brazil) (Português do Brasil) Portuguese (Brazil) (Português do Brasil) Spanish (Español) Spanish (Español) Indonesian (Bahasa Indonesia) Indonesian (Bahasa Indonesia)
Pencari JSONPath

Pencari JSONPath

Temukan ekspresi JSONPath dengan mengklik node di tampilan pohon interaktif, atau evaluasi kueri JSONPath untuk mengekstrak data dari JSON.

Apa itu Pencari JSONPath?

Pencari JSONPath adalah alat interaktif yang membantu Anda menavigasi dan membuat kueri struktur data JSON. Baik Anda seorang pengembang yang bekerja dengan API, insinyur QA yang menguji endpoint, atau analis data yang menjelajahi dataset, alat ini memudahkan Anda menemukan jalur yang tepat ke bagian data apa pun dalam JSON Anda.

Apa itu JSONPath?

JSONPath adalah bahasa kueri untuk JSON, mirip dengan XPath untuk XML. Ini memungkinkan Anda menentukan jalur ke elemen dalam dokumen JSON menggunakan sintaks ekspresi sederhana. Misalnya, $.store.book[0].title mengacu pada judul buku pertama dalam objek toko.

Dua Mode Powerful

Cari Jalur

Klik node apa pun di pohon visual untuk langsung melihat ekspresi JSONPath-nya. Sempurna untuk dengan cepat mengidentifikasi jalur yang Anda butuhkan.

Evaluasi

Masukkan ekspresi JSONPath dan lihat hasil yang cocok segera. Bagus untuk menguji kueri sebelum menggunakannya dalam kode Anda.

Data Anda Tetap Pribadi

Pemrosesan 100% Sisi Klien: Semua pemrosesan terjadi di browser Anda. Data JSON Anda tidak pernah meninggalkan perangkat Anda, dan kami tidak mengumpulkan atau menyimpan informasi apa pun yang Anda masukkan.
  • Tanpa unggahan — Data JSON Anda tidak pernah meninggalkan perangkat Anda
  • Tanpa pelacakan — Kami tidak mengumpulkan atau menyimpan data apa pun yang Anda masukkan
  • Privasi lengkap — Semuanya berjalan secara lokal di browser Anda

Cara Menggunakan Pencari JSONPath

Memulai

1

Muat Data JSON Anda

Tempel data JSON Anda ke panel input di sebelah kiri, atau klik tombol Sampel untuk memuat data contoh. Anda juga dapat menggunakan tombol Unggah untuk memuat file .json dari perangkat Anda.

2

Lihat Struktur Pohon

Tampilan pohon di sebelah kanan akan secara otomatis menampilkan struktur JSON yang diuraikan dengan tipe data berkode warna dan node yang dapat diciutkan.

3

Klik untuk Mendapatkan Jalur

Klik pada kunci, nilai, atau elemen array apa pun di tampilan pohon. Bilah jalur akan menampilkan ekspresi JSONPath untuk node tersebut, siap untuk disalin.

Menemukan Jalur (Mode Cari Jalur)

Mode Cari Jalur sempurna untuk menemukan ekspresi JSONPath melalui penjelajahan visual:

  • Pastikan mode Cari Jalur dipilih di toolbar
  • Klik pada kunci, nilai, atau elemen array apa pun di tampilan pohon
  • Bilah jalur akan menampilkan ekspresi JSONPath untuk node tersebut
  • Klik Salin untuk menyalin jalur ke clipboard Anda

Mengevaluasi Ekspresi (Mode Evaluasi)

Mode Evaluasi memungkinkan Anda menguji kueri JSONPath dan melihat hasil secara real-time:

  • Beralih ke mode Evaluasi menggunakan toggle toolbar
  • Masukkan ekspresi JSONPath di bidang input (misalnya, $.store.book[?(@.price < 10)])
  • Tekan Enter atau klik tombol Jalankan
  • Lihat hasil yang cocok di bawah, termasuk jumlah kecocokan
  • Klik Salin untuk menyalin hasil
Tips Pro: Gunakan toggle Dot / Bracket untuk beralih antara gaya notasi. Notasi dot ($.store.book[0].title) lebih bersih, sementara notasi bracket ($['store']['book'][0]['title']) bekerja dengan karakter khusus dalam kunci.

Fitur

Tampilan Pohon Interaktif

JSON Anda ditampilkan sebagai pohon yang dapat diciutkan dengan tipe data berkode warna untuk navigasi yang mudah.

  • Objek dengan lencana ungu (jumlah kunci)
  • Array dengan lencana hijau (jumlah elemen)
  • Warna berbeda untuk string, angka, boolean, dan null
  • Kontrol expand/collapse untuk struktur besar

Klik-ke-Jalur

Cukup klik node apa pun di pohon untuk langsung mendapatkan ekspresi JSONPath-nya.

  • Pembaruan jalur real-time
  • Salin ke clipboard dengan satu klik
  • Bekerja dengan struktur bersarang
  • Mendukung kedua gaya notasi

Evaluator JSONPath

Uji ekspresi JSONPath dan lihat hasil segera dengan dukungan sintaks lengkap.

  • Akses anak dan wildcard
  • Pengindeksan dan pemotongan array
  • Pencarian rekursif
  • Penyaringan lanjutan

Sintaks JSONPath yang Didukung

Evaluator mendukung berbagai fitur JSONPath yang komprehensif:

Fitur Sintaks Contoh
Akses Anak $.key atau $['key'] $.store.name
Pengindeksan Array $[index] $.book[0], $.book[-1]
Wildcard $.* atau $[*] $.store.*, $.book[*]
Pencarian Rekursif $.. $..author
Pemotongan Array $[start:end:step] $.book[0:3], $.book[0:6:2]
Filter [?(@.field operator value)] $.book[?(@.price < 10)]

Alat Tambahan

Toggle Notasi

Beralih antara notasi dot dan notasi bracket dengan satu klik. Pilih gaya yang paling sesuai untuk kasus penggunaan Anda.

Lembar Contekan JSONPath

Klik tombol ? untuk membuka tabel referensi cepat dengan ekspresi JSONPath umum dan deskripsinya.

Kontrol Pohon Pintar

Gunakan tombol Expand All dan Collapse All untuk dengan cepat menavigasi struktur JSON besar.

Pertanyaan yang Sering Diajukan

Apa itu ekspresi JSONPath?

Ekspresi JSONPath adalah string yang mendeskripsikan jalur ke satu atau lebih elemen dalam dokumen JSON. Selalu dimulai dengan $ (elemen root) dan menggunakan titik atau bracket untuk menavigasi lebih dalam ke struktur.

Contoh: $.users[0].name mendapatkan nama pengguna pertama dalam array users.

Apa perbedaan antara notasi dot dan bracket?

Notasi Dot

$.store.name

  • Lebih pendek dan mudah dibaca
  • Hanya bekerja dengan kunci alpanumerik sederhana
  • Tidak dapat menangani karakter khusus
Notasi Bracket

$['store']['name']

  • Bekerja dengan kunci apa pun
  • Menangani karakter khusus, spasi, tanda hubung
  • Lebih verbose tetapi lebih fleksibel

Bagaimana cara memfilter elemen array?

Gunakan sintaks filter [?(@.field operator value)] di mana @ mewakili elemen saat ini yang dievaluasi.

Contoh filter umum:

  • $.products[?(@.price < 50)] — produk lebih murah dari 50
  • $.users[?(@.active == true)] — hanya pengguna aktif
  • $.items[?(@.category == 'electronics')] — item dalam kategori tertentu
  • $.orders[?(@.quantity >= 10)] — pesanan dengan 10 atau lebih item

Apa yang dilakukan operator ..?

Titik ganda (..) melakukan pencarian rekursif melalui seluruh struktur JSON, melihat setiap tingkat penyarangan.

Contoh: $..name menemukan semua nilai dengan kunci "name" terlepas dari di mana mereka muncul dalam hierarki — baik di tingkat root, bersarang dalam objek, atau jauh di dalam array.

Catatan Performa: Pencarian rekursif dapat lambat pada dokumen JSON yang sangat besar karena mereka memeriksa setiap node di pohon.

Bisakah saya menggunakan indeks array negatif?

Ya. Indeks negatif menghitung dari akhir array, memudahkan akses elemen dari belakang tanpa mengetahui panjang array.

  • $.array[-1] mengembalikan elemen terakhir
  • $.array[-2] mengembalikan elemen kedua dari belakang
  • $.array[-3] mengembalikan elemen ketiga dari belakang

Apakah data saya aman?

Tentu saja. Semua penguraian JSON dan evaluasi JSONPath terjadi sepenuhnya di browser Anda menggunakan JavaScript. Data Anda tidak pernah meninggalkan perangkat Anda.

  • Tanpa unggahan server — semuanya berjalan sisi klien
  • Tanpa penyimpanan data — tidak ada yang disimpan setelah Anda menutup halaman
  • Tanpa pelacakan atau analitik pada konten JSON Anda
  • Privasi dan keamanan lengkap

Berapa ukuran JSON maksimal yang didukung?

Tidak ada batas keras yang diberlakukan oleh alat, tetapi file JSON yang sangat besar dapat mempengaruhi performa browser karena rendering pohon dan manipulasi DOM.

Performa Optimal < 1 MB
Mungkin Melambat 1-10 MB
Masalah Performa > 10 MB

Rekomendasi: Untuk performa terbaik, jaga JSON Anda di bawah beberapa megabita. Jika Anda bekerja dengan file yang sangat besar, pertimbangkan untuk mengekstrak dan menguji bagian yang lebih kecil.

JSONPath Panduan Singkat
Ekspresi Deskripsi
$Objek root
$.keyProperti anak
$..keyPencarian rekursif
$.arr[0]Indeks array
$.arr[-1]Elemen terakhir
$.arr[*]Semua elemen
$.arr[0:3]Irisan array
$.arr[?(@.price<10)]Ekspresi filter
$.obj.*Semua nilai
Input
Tampilan Pohon

Tempel JSON untuk menjelajahi strukturnya

Path
$
Query

            
| |
Klik node apa pun di pohon untuk langsung mendapatkan ekspresi JSONPath-nya
Beralih antara notasi Dot dan Bracket menggunakan tombol toggle
Gunakan mode Evaluate untuk menjalankan kueri JSONPath dan mengekstrak data yang cocok
Coba $.store.book[?(@.price < 10)] untuk memfilter buku berdasarkan harga
Gunakan $..author untuk menemukan semua penulis di kedalaman apa pun
Tekan Enter di input ekspresi untuk menjalankan kueri
Klik tombol ? untuk melihat lembar contekan JSONPath
Semua pemrosesan terjadi di browser Anda - tidak ada data yang dikirim ke server mana pun
Ingin belajar lebih banyak? Baca dokumentasi →
1/9
Mulai ketik untuk mencari...
Mencari...
Tidak ada hasil yang ditemukan
Coba gunakan kata kunci yang berbeda