ตัวจัดรูปแบบ JSON
วาง JSON จากคำตอบของ API, ไฟล์กำหนดค่า, webhook หรือบันทึก log แล้วเลือกจัดรูปแบบ ย่อขนาด หรือตรวจสอบความถูกต้อง ตัวจัดรูปแบบจะขยาย object และ array ที่ซ้อนกันด้วยการเยื้อง 2 หรือ 4 ช่องว่าง ตัว Minify จะลบช่องว่างที่ไม่จำเป็น และตัวตรวจสอบจะยืนยันว่าข้อความเป็น JSON ที่ถูกต้องก่อนที่คุณจะคัดลอกผลลัพธ์
วิธีจัดรูปแบบ JSON
-
1
วาง JSON ของคุณ
เพิ่มค่า JSON ที่สมบูรณ์: object, array, string, number, boolean หรือ `null`
-
2
เลือกการทำงาน
ใช้จัดรูปแบบสำหรับผลลัพธ์ที่อ่านง่าย ใช้ย่อขนาดสำหรับผลลัพธ์กะทัดรัด หรือใช้ตรวจสอบเพื่อเช็กไวยากรณ์
-
3
เลือกการเยื้อง
สำหรับผลลัพธ์ที่จัดรูปแบบแล้ว เลือก 2 ช่องว่างสำหรับโปรเจกต์เว็บ หรือ 4 ช่องว่างเมื่อเป็นมาตรฐานของ repository
-
4
คัดลอกผลลัพธ์
ตรวจข้อความจาก parser หรือผลลัพธ์ที่จัดรูปแบบแล้ว จากนั้นคัดลอกกลับไปยัง editor, API client หรือเอกสารของคุณ
ตัวจัดรูปแบบ JSON นี้ทำอะไรได้บ้าง
- จัดรูปแบบ JSON: เปลี่ยนอินพุตแบบกะทัดรัด เช่น
{"a":1,"b":[1,2,3]}ให้เป็น JSON ที่อ่านง่ายพร้อมการเยื้อง - ย่อขนาด JSON: ลบช่องว่างที่มีไว้เพื่อให้อ่านง่ายเท่านั้น เหมาะกับตัวอย่างสั้น ๆ การฝังข้อมูล และ payload สำหรับส่งผ่านระบบ
- ตรวจสอบไวยากรณ์: ตรวจว่าข้อความที่วางสามารถ parse เป็น JSON ได้หรือไม่ นี่คือการตรวจไวยากรณ์ ไม่ใช่การตรวจด้วย JSON Schema
- รองรับค่ารากของ JSON ทุกรูปแบบ: object และ array เป็นรูปแบบที่พบบ่อย แต่ข้อความ JSON อาจเป็น string, number,
true,falseหรือnullก็ได้ - ใช้งานเป็นลำดับง่าย ๆ: วางข้อมูล เลือกการทำงาน ตรวจผลลัพธ์ แล้วคัดลอกผลลัพธ์
สิ่งที่เครื่องมือนี้ตั้งใจไม่เปลี่ยน
- ไม่ซ่อม JSON ที่ผิดรูปแบบให้อัตโนมัติ ข้อความจาก parser จะบอกว่าควรแก้ส่วนใด
- ไม่รับ wrapper แบบ JSONP เช่น
callback({...}) - ไม่รับ comment หรือเครื่องหมาย comma ท้ายรายการจาก JSONC หากคุณยังไม่ได้ลบออกก่อน
- ไม่เรียงลำดับคีย์ของ object ลำดับเดิมจะถูกเก็บไว้เท่าที่ parser และ serializer อนุญาต
- ไม่ตรวจ business rule, field บังคับ หรือ schema ของ API ให้ใช้ตัวตรวจสอบ JSON Schema สำหรับขั้นตอนนั้น
การเลือกวิธีจัดรูปแบบ
| สถานการณ์ | การทำงานที่เหมาะที่สุด | ช่วยอย่างไร |
|---|---|---|
| อ่านคำตอบจาก API | จัดรูปแบบด้วย 2 ช่องว่าง | object และ array ที่ซ้อนกันอ่านไล่ได้ง่ายขึ้น |
| ทำให้ตรงกับสไตล์ของ repository | จัดรูปแบบด้วย 2 หรือ 4 ช่องว่าง | การเยื้องที่สม่ำเสมอทำให้ code review อ่านง่าย |
| ฝัง payload ใน request | ย่อขนาด | ลบช่องว่างโดยไม่เปลี่ยนค่าของ JSON |
| ตรวจข้อมูลที่คัดลอกจาก log | ตรวจสอบ | ยืนยันว่าข้อความที่วางเป็น JSON ที่สมบูรณ์ก่อนนำไปใช้ต่อ |
| เตรียมเอกสาร API | จัดรูปแบบ | ตัวอย่างตรวจดูและคัดลอกได้ง่ายขึ้น |
ปัญหาไวยากรณ์ JSON ที่ตรวจพบได้
| ข้อความจาก parser | สาเหตุที่พบบ่อย | วิธีแก้ |
|---|---|---|
Unexpected token ' at position X |
ใช้เครื่องหมายคำพูดเดี่ยวกับคีย์หรือ string | ใช้เครื่องหมายคำพูดคู่สำหรับ string ใน JSON |
Unexpected end of JSON input |
ขาดวงเล็บปีกกา วงเล็บเหลี่ยม หรือเครื่องหมายคำพูดปิด | ตรวจส่วนท้ายของข้อความที่วาง |
Unexpected token , at position X |
มี comma หลังรายการสุดท้าย | ลบ comma ท้ายรายการ |
Unexpected token a at position X |
คีย์ไม่มีเครื่องหมายคำพูด, NaN หรือ undefined |
ใส่เครื่องหมายคำพูดให้คีย์และใช้เฉพาะค่าที่ JSON รองรับ |
Unexpected token / at position X |
คัดลอก comment มาจาก JSONC หรือ JavaScript | ลบ comment แบบ // และ /* */ ก่อนตรวจสอบ |
เคล็ดลับใช้งานจริง
- เมื่อรีวิวคำตอบ ให้จัดรูปแบบก่อน และย่อขนาดเฉพาะเมื่อจำเป็นต้องใช้ payload แบบกะทัดรัดจริง ๆ
- ตรวจสอบก่อนวาง JSON ลงในเอกสาร ticket หรือ API client โดยเฉพาะเมื่อคัดลอกมาจาก log เพียงบางส่วน
- รักษามาตรฐานการเยื้องของโปรเจกต์ไว้ การเปลี่ยนไฟล์เดิมจาก 2 ช่องว่างเป็น 4 ช่องว่างอาจทำให้ diff อ่านยาก
- หลีกเลี่ยงการวาง secret, credential สำหรับ production หรือข้อมูลลูกค้าลงในเครื่องมือเว็บทั่วไป สำหรับ payload ที่อ่อนไหว ให้ใช้เครื่องมือภายในหรือเครื่องมือ offline ที่องค์กรอนุมัติ
คำถามที่พบบ่อย
ไม่ใช่ เครื่องมือนี้ตรวจเฉพาะไวยากรณ์ของ JSON เท่านั้น หากต้องยืนยัน field บังคับ ค่าที่อนุญาต หรือโครงสร้าง object ให้ส่งผลลัพธ์ไปตรวจด้วย JSON Schema validator หลังจาก parse ได้ถูกต้องแล้ว
JSON แบบเข้มงวดไม่อนุญาต comment หรือ comma ท้ายรายการ ให้ลบ comment สไตล์ JSONC และ comma ตัวสุดท้ายก่อนตรวจสอบหรือจัดรูปแบบ
ใช้สไตล์ที่โปรเจกต์ของคุณใช้อยู่แล้ว 2 ช่องว่างพบบ่อยใน JavaScript และไฟล์กำหนดค่าบนเว็บ ส่วน 4 ช่องว่างอาจอ่านง่ายกว่าใน repository ฝั่ง backend บางแบบ
ควรหลีกเลี่ยงการวาง secret, access token, credential หรือข้อมูลลูกค้าลงในตัวจัดรูปแบบเว็บทั่วไป สำหรับ payload ที่อ่อนไหว ให้ใช้เครื่องมือภายในหรือ offline ที่ได้รับอนุมัติ
เครื่องมือที่เกี่ยวข้อง
ตัวลดรูปพีชคณิตบูลีน
ลดรูปนิพจน์บูลีนด้วยแผนผัง Karnaugh และอัลกอริทึม Quine-McCluskey แสดงทุกขั้นตอนการลดรูปและผลลัพธ์สุดท้ายในรูป SOP/POS
เลขฐานสองเป็นฐานสิบ
แปลงเลขฐานสองเป็นฐานสิบได้ทันที แสดงการกระจายตามตำแหน่งเพื่อให้เห็นว่าแต่ละบิตมีส่วนอย่างไร
เครื่องสร้างตัวอักษรสุ่ม
สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน
เครื่องกำเนิดจานสี
สร้างพาเลตสีแบบเอกรงค์ ใกล้เคียง คู่ตรงข้าม ไตรแอดิก หรือเตตราดิกจากสี HEX หลัก พร้อมส่งออกตัวแปร CSS ที่คัดลอกได้ทันที
ตัวแปลงไบนารีเป็น ASCII
วางข้อมูลไบนารี (ไบต์ที่คั่นด้วยช่องว่าง หรือบิตสตรีมยาวๆ) แล้วรับข้อความ ASCII ที่แทนค่านั้น รองรับการเข้ารหัสแบบ 7 บิตและ 8 บิต
เครื่องมือสร้างสีแบบสุ่ม
สร้างสี HEX แบบสุ่ม 1 ถึง 50 สี พร้อมตัวอย่างสีสำหรับดูตัวอย่าง คัดลอก และนำไปใช้ใน CSS งานทดสอบ หรือการสำรวจพาเลตสี.