Cara menggunakan JSON Path Finder
- Tempel JSON: payload webhook dari Webflow, HubSpot, atau Stripe, respons API, atau contoh output Make/Zapier.
- Klik kunci atau nilai mana pun di pohon (fitur pencarian membantu untuk payload yang besar).
- Salin path sesuai sistem yang sedang kamu pakai: JavaScript, JSONPath, jq, Python, PHP, n8n, atau Make.
- Untuk Make, atur nomor modul dari modul yang menghasilkan data. Path-nya akan menjadi
{{3.items[2].name}}.
Mengapa path finder menghemat waktu
Payload di dunia nyata itu dalam: webhook form Webflow, kontak HubSpot, event Stripe, atau item CMS bisa berisi ratusan baris objek dan array bersarang. Menulis data.payload.data.items[0].fieldData.name secara manual berarti menghitung kurung dan menebak-nebak, dan satu indeks yang salah diam-diam mengembalikan undefined. Dengan mengklik nilainya, kamu langsung mendapatkan path yang tepat.
Perbandingan sintaks path
| Sintaks | Contoh | Catatan |
|---|---|---|
| JavaScript | data.items[1].name | Kunci dengan spasi memakai ["company name"] |
| JSONPath | $.items[1].name | Dipakai banyak API, tes Postman, dan beberapa tool no-code |
| jq | .items[1].name | Pemroses JSON berbasis command line |
| Python / PHP | data["items"][1]["name"] | Akses dengan kurung siku pada dict dan array |
| n8n | {{ $json.items[1].name }} | Sintaks expression di field node |
| Make | {{1.items[2].name}} | Array dimulai dari 1; angka pertama adalah modul |
Array 1-based di Make
Di tempat lain, item array pertama adalah [0]; di Make adalah [1]. Ini alasan paling umum mengapa mapping di Make mengembalikan hasil kosong. Tool ini mengonversi indeks secara otomatis dan membungkus kunci yang mengandung spasi dengan backtick. Di Zapier, field bersarang tampil dalam bentuk datar (misalnya contact__email) dan line item diperlakukan sebagai array. “Zapier field key” menampilkan bentuk datar tersebut.
Perlu merapikan JSON dulu? Gunakan JSON Formatter. Untuk mengubah array menjadi tabel, coba JSON to CSV; untuk tipe data dalam kode, JSON to TypeScript; dan untuk field tanggal di automasi, Date Format Converter.
Juga dicari sebagai: cara ambil json path, json path, mapping make, n8n expression, jq path, webhook payload, json key path, json tree viewer online.
Tool yang cocok dipakai bersama JSON Path Finder
- Penguji JSONPath — Ketik query JSONPath dan langsung lihat apa yang dipilihnya, lengkap dengan path persis dari setiap hasil.
- Webhook Tester — Dapatkan URL unik, arahkan webhook atau klien HTTP apa pun ke sana, lalu lihat request masuk secara real time — header, query string, dan body yang sudah dirapikan, plus pengecekan signature HMAC.
- API Tester — Alternatif Postman yang ringan langsung di browser: susun request HTTP, kirim, lalu periksa status, waktu respons, header, dan JSON yang sudah dirapikan.
- Styler Form HubSpot — Rancang form HubSpot Anda dengan pratinjau langsung — input, label, baris dua kolom, checkbox, pesan error, dan tombol kirim — lalu salin CSS, kode embed lengkap, atau Code Embed untuk Webflow yang siap pakai.
Pertanyaan yang sering diajukan
Apakah JSON saya diunggah?
Kenapa Make memakai [1] untuk item pertama?
Apa itu JSONPath?
$.store.books[0].title memilih satu nilai; sintaks ini dipakai di API, tool testing, dan beberapa platform automasi.