วิธีดู JSON แบบ tree
- วาง JSON ลากไฟล์มาวาง หรือโหลดจาก URL โครงสร้าง tree จะแสดงอยู่ข้างข้อความ
- คลิกที่แถวเพื่อขยายหรือยุบ หรือใช้ ขยายทั้งหมด และ ยุบทั้งหมด ถ้าใช้คีย์บอร์ด ปุ่ม ↑ และ ↓ ใช้เลื่อน ส่วน ← และ → ใช้ปิดและเปิดโหนด
- พิมพ์ในช่องค้นหาเพื่อแสดงเฉพาะคีย์และค่าที่ตรงกัน เลือกโหนดเพื่อคัดลอก JSONPath, พาธแบบ JavaScript หรือค่าของโหนดนั้น
วิธีอ่าน JSON tree
- อ็อบเจ็กต์จะแสดงจำนวนคีย์ เช่น
{5}และอาร์เรย์จะแสดงจำนวนรายการ เช่น[12] - สีและป้ายเล็กๆ บอกชนิดของทุกค่า: string, number, boolean, null, object หรือ array
- อาร์เรย์ยาวๆ จะแสดงครั้งละ 200 รายการ ไฟล์ที่มีค่าหลายแสนค่าจึงยังตอบสนองได้รวดเร็ว
- ตัวเลขแสดงตรงตามที่เขียนไว้ทุกประการ – ID ยาวๆ ไม่ถูกปัดเศษ และคีย์ยังคงลำดับเดิม
JSONPath คืออะไร?
JSONPath ใช้ระบุตำแหน่งของค่าภายในเอกสาร JSON คล้ายกับพาธของไฟล์ และได้รับการกำหนดเป็นมาตรฐานในปี 2024 ใน RFC 9535 โดย $ คือ root, .name เลือกพร็อพเพอร์ตี [0] เลือกรายการในอาร์เรย์ และ ['first name'] เลือกพร็อพเพอร์ตีที่ชื่อมีช่องว่างหรืออักขระพิเศษ
| พาธ | เลือก |
|---|---|
$.store | พร็อพเพอร์ตี store ของอ็อบเจ็กต์ root |
$.products[0] | รายการแรกของอาร์เรย์ products |
$.products[0].price | ราคาของสินค้าชิ้นแรกนั้น |
$.address.geo.lat | ค่าที่ซ้อนลึกลงไปสามระดับ |
$['shipping address'].city | คีย์ที่มีช่องว่างในชื่อ |
ใน JavaScript ค่าเดียวกันคือ data.products[0].price – ใช้ คัดลอกพาธ JS เพื่อรับพาธในรูปแบบนี้
คำถามที่พบบ่อย
เปิดไฟล์ JSON ขนาดใหญ่ได้ไหม?
ได้ ระบบจะวาดเฉพาะส่วนของ tree ที่ขยายอยู่ และอาร์เรย์ยาวๆ จะแสดงครั้งละ 200 รายการ ไฟล์ขนาดหลายสิบเมกะไบต์จึงเปิดได้ในเบราว์เซอร์บนเดสก์ท็อป
คัดลอกพาธของค่าได้อย่างไร?
คลิกที่โหนด แล้วใช้ คัดลอกพาธ สำหรับ JSONPath ($.users[0].email) หรือ คัดลอกพาธ JS สำหรับ JavaScript (data.users[0].email)
แก้ไข JSON ใน viewer ได้ไหม?
viewer เป็นแบบอ่านอย่างเดียว จึงไม่มีอะไรเปลี่ยนโดยไม่ตั้งใจ หากต้องการเปลี่ยนค่า เปลี่ยนชื่อคีย์ หรือเพิ่มรายการ ให้เปิด JSON Editor
ถ้า JSON ของฉันไม่ถูกต้องจะเกิดอะไรขึ้น?
กล่องข้อผิดพลาดจะแสดงบรรทัด คอลัมน์ และสาเหตุของปัญหา และ tree จะยังคงแสดงเวอร์ชันล่าสุดที่ถูกต้องจนกว่าข้อผิดพลาดจะถูกแก้ไข