ตัวจัดรูปแบบและตรวจสอบ JSON

JSON คืออะไร?

JSON (JavaScript Object Notation) เป็นรูปแบบการแลกเปลี่ยนข้อมูลที่มีน้ำหนักเบาและไม่ขึ้นกับภาษา ง่ายสำหรับมนุษย์ในการอ่านและเขียน และง่ายสำหรับเครื่องจักรในการแยกวิเคราะห์และสร้าง

คุณรู้หรือไม่? JSON เป็นรูปแบบข้อมูลที่นิยมมากที่สุดในโลก โดยมาแทนที่ XML ใน Web API สมัยใหม่ส่วนใหญ่อย่างมีประสิทธิภาพ

กฎไวยากรณ์ของ JSON

ไวยากรณ์ที่ถูกต้อง

•ข้อมูลอยู่ในรูปแบบคู่ของชื่อ/ค่า
•คีย์ต้องอยู่ในเครื่องหมายคำพูดคู่
•สตริงต้องใช้เครื่องหมายคำพูดคู่
•ข้อมูลถูกคั่นด้วยเครื่องหมายจุลภาค

ข้อผิดพลาดทั่วไป

×มีเครื่องหมายจุลภาคต่อท้ายหลังองค์ประกอบสุดท้าย
×ใช้เครื่องหมายคำพูดเดี่ยวแทนเครื่องหมายคำพูดคู่
×ขาดวงเล็บปีกกาหรือวงเล็บเหลี่ยมปิด
×การเพิ่มความคิดเห็น

กรณีการใช้งานทั่วไป

Web APIs (REST/GraphQL)

รูปแบบมาตรฐานสำหรับการแลกเปลี่ยนข้อมูล API

ไฟล์การกำหนดค่า

การจัดเก็บการตั้งค่า (package.json, ฯลฯ)

ฐานข้อมูล NoSQL

การจัดเก็บข้อมูลใน MongoDB, CouchDB

วิธีใช้ ตัวแก้ไข JSON

1
วาง JSON ลงในช่อง Raw Input เช่น response ที่คัดลอกจากแท็บ Network ของเบราว์เซอร์ ไฟล์ตั้งค่า หรือบรรทัดหนึ่งของ log
2
กด Beautify เพื่อจัดย่อหน้า หรือ Minify เพื่อลบช่องว่างทั้งหมด หากข้อความไม่ใช่ JSON ที่ถูกต้อง เครื่องมือจะแจ้งข้อผิดพลาดให้คุณหาเครื่องหมายจุลภาคหรือเครื่องหมายคำพูดที่ผิด
3
ใช้ Tree View เพื่อดู object และ array ที่ซ้อนกัน คุณสามารถขยาย ยุบ และแก้ไขค่าได้โดยตรง เร็วกว่าการเลื่อนดูหลายพันบรรทัด
4
กด Copy Results เพื่อนำผลลัพธ์กลับไปใช้ในโค้ด เครื่องมือเรียก API หรือไฟล์ตั้งค่า

ตัวอย่างการใช้งานจริง

อ่าน response ของ API

response ขนาด 20 KB ที่อยู่ในบรรทัดเดียวอ่านไม่ได้เลย Beautify จะจัดให้เป็นโครงสร้างที่มีย่อหน้า ทำให้หาฟิลด์ที่ต้องการได้ในไม่กี่วินาที

แก้ไฟล์ตั้งค่า

package.json, tsconfig.json หรือไฟล์ตั้งค่า VS Code โหลดไม่ได้เพราะจุลภาคเกินมาตัวเดียว ตัวตรวจสอบจะชี้ปัญหาก่อนที่การ build จะล้มเหลว

ลดขนาดข้อมูล

Minify JSON สำหรับทดสอบหรือ body ของ request ก่อนวางลงในคำสั่ง curl ตัวแปรสภาพแวดล้อม หรือโค้ดทดสอบ ซึ่งการขึ้นบรรทัดใหม่อาจทำให้เกิดปัญหา

แก้ไขข้อมูลที่ซ้อนลึก

เปลี่ยนค่าที่อยู่ลึกใน feature flag หรือข้อมูล mock ได้จากตัวแก้ไขแบบต้นไม้ โดยไม่ต้องนับวงเล็บเอง

คำถามที่พบบ่อย

ทำไม JSON ของฉันไม่ถูกต้อง?+

สาเหตุที่พบบ่อยคือมีจุลภาคเกินท้าย ใช้เครื่องหมายคำพูดเดี่ยวแทนคู่ มีคอมเมนต์ หรือคีย์ที่ไม่ได้อยู่ในเครื่องหมายคำพูด สิ่งเหล่านี้ใช้ได้ใน object ของ JavaScript แต่ไม่ได้ใน JSON มาตรฐาน (RFC 8259)

Beautify กับ Minify ต่างกันอย่างไร?+

ทั้งสองแบบเก็บข้อมูลเหมือนเดิมทุกอย่าง Beautify เพิ่มย่อหน้าและการขึ้นบรรทัดให้อ่านง่าย ส่วน Minify ลบออกเพื่อให้ไฟล์เล็กที่สุดสำหรับส่งหรือจัดเก็บ

มีขีดจำกัดขนาดหรือไม่?+

ไม่มีขีดจำกัดตายตัวเพราะทุกอย่างทำงานในเบราว์เซอร์ ไฟล์หลาย MB ใช้งานได้ แต่เอกสารขนาดใหญ่มากขึ้นอยู่กับหน่วยความจำของอุปกรณ์

JSON ของฉันถูกอัปโหลดไปที่ใดหรือไม่?+

ไม่ การแยกวิเคราะห์ จัดรูปแบบ และแก้ไขทำในเบราว์เซอร์ทั้งหมด คีย์ API หรือข้อมูลลูกค้าใน JSON จึงไม่ออกจากเครื่องของคุณ