จัดรูปแบบ JSON ออนไลน์

การเยื้อง

ข้อมูล JSON

JSON คืออะไร?

JSON (JavaScript Object Notation) คือรูปแบบข้อมูลที่ใช้กันอย่างแพร่หลายในการแลกเปลี่ยนข้อมูลระหว่างเซิร์ฟเวอร์และเว็บแอปพลิเคชัน มีโครงสร้างที่อ่านง่าย รองรับ object, array, string, number, boolean และ null

เครื่องมือ JSON Formatter ช่วยจัดรูปแบบ JSON ให้สวยงาม อ่านง่าย พร้อมตรวจสอบความถูกต้องของ syntax อัตโนมัติ

วิธีใช้งาน

วาง JSON ที่ต้องการจัดรูปแบบในช่อง input แล้วกดปุ่ม 'จัดรูปแบบ' หรือ 'ย่อ JSON' ตามต้องการ

1วาง JSON ในช่อง input
2เลือกขนาดการเยื้อง (2 spaces, 4 spaces, หรือ Tab)
3กดปุ่ม 'จัดรูปแบบ' เพื่อ beautify หรือ 'ย่อ JSON' เพื่อ minify
4คัดลอกผลลัพธ์ด้วยปุ่ม 'คัดลอก'

ฟีเจอร์หลัก

จัดรูปแบบ JSON ให้สวยงาม (Beautify/Pretty Print)

ย่อ JSON (Minify) เพื่อลดขนาดไฟล์

ตรวจสอบ JSON ถูกต้อง (Validate) พร้อมแจ้งตำแหน่งข้อผิดพลาด

เลือกขนาดการเยื้อง (2/4 spaces หรือ Tab)

ไฮไลท์สี syntax สำหรับอ่านง่าย

กรณีใช้งานจริง

tools.jsonformat.info.useCases.content

Debug response จาก REST API ที่ส่งกลับมาเป็น JSON บรรทัดเดียวยาวๆ อ่านไม่ออก

ตรวจสอบ config file เช่น package.json หรือ tsconfig.json ว่ามี syntax ผิดตรงไหน

เตรียม JSON payload สำหรับทดสอบ API ผ่าน Postman หรือ curl ให้ถูกต้อง

Minify JSON ก่อนบันทึกลง localStorage หรือส่งผ่าน WebSocket เพื่อลดขนาดข้อมูล

แปลง JSON ที่ copy มาจาก database query ให้อ่านง่ายก่อนวิเคราะห์ข้อมูล

เคล็ดลับและแนวปฏิบัติที่ดี

tools.jsonformat.info.tips.content

ใช้ indent 2 spaces เป็นมาตรฐานในโปรเจกต์ JavaScript/TypeScript เพื่อความสอดคล้องกับ ecosystem

ตรวจสอบ trailing comma เสมอ เพราะ JSON มาตรฐานไม่รองรับ comma ตัวสุดท้ายก่อน {'}'} หรือ {']'}

ใช้ Minify เมื่อต้องส่ง JSON ผ่าน API เพราะลดขนาด bandwidth ได้ 30-60% เมื่อเทียบกับ pretty print

ใส่ข้อมูลทีละส่วนเมื่อ debug JSON ขนาดใหญ่ เพื่อหาจุดที่ syntax ผิดได้เร็วขึ้น

ใช้ JSON Formatter ร่วมกับ diff tool เพื่อเปรียบเทียบ JSON สองชุดที่จัดรูปแบบเหมือนกัน

ข้อผิดพลาดที่พบบ่อย

tools.jsonformat.info.commonMistakes.content

ใช้ single quotes แทน double quotes สำหรับ key และ string ซึ่ง JSON ไม่รองรับ ต้องใช้ "" เท่านั้น

ลืมลบ comment ออกจาก JSON เพราะ JSON มาตรฐานไม่รองรับ // หรือ /* */ (ใช้ JSONC แทน)

ใส่ trailing comma หลัง element สุดท้ายใน array หรือ object ทำให้ parse ไม่ผ่าน

ส่ง undefined หรือ function ใน JavaScript object แล้วคาดว่า JSON.stringify จะเก็บค่าไว้ ซึ่งจะถูกตัดออก

เปรียบเทียบกับเครื่องมืออื่น

เครื่องมือ JSON Formatter ออนไลน์ของเราทำงานบนเบราว์เซอร์ทั้งหมด ไม่ต้องติดตั้งโปรแกรมเพิ่ม ใช้ได้ทันทีจากทุกอุปกรณ์ ต่างจาก VS Code หรือ IDE ที่ต้องติดตั้ง extension เพิ่ม

เมื่อเทียบกับ jq command-line หรือ Prettier ที่ต้องตั้งค่าโปรเจกต์ เครื่องมือนี้เหมาะสำหรับงาน ad-hoc ที่ต้องการจัดรูปแบบเร็วๆ โดยเฉพาะเมื่อทำงานบนเครื่องที่ไม่ได้ตั้งค่า dev environment ไว้

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

JSON Formatter เป็นเครื่องมือจัดรูปแบบข้อมูล JSON ให้สวยงาม อ่านง่าย พร้อมตรวจสอบความถูกต้องของ syntax อัตโนมัติ รองรับทั้ง Beautify และ Minify

JSON ต้องใช้เครื่องหมายคำพูดคู่ (double quotes) กับ key ทุกตัว ไม่รองรับ function, undefined, comment ส่วน JavaScript Object ยืดหยุ่นกว่า ไม่จำเป็นต้องใส่ quotes

ไม่ ข้อมูลทั้งหมดประมวลผลในเบราว์เซอร์ของคุณ (client-side) ไม่มีการส่งข้อมูลออกไปที่ไหน มั่นใจเรื่องความเป็นส่วนตัว

รองรับ JSON ขนาดใหญ่ได้ แต่ถ้าข้อมูลมากกว่า 1MB อาจใช้เวลาประมวลผลนานขึ้น แนะนำให้ใช้เครื่องมือ desktop สำหรับไฟล์ขนาดใหญ่มาก

Minify คือการลดขนาด JSON โดยลบ whitespace, newline และ indent ออกทั้งหมด ทำให้ไฟล์มีขนาดเล็กลง เหมาะสำหรับใช้ใน production หรือส่งข้อมูลผ่าน API

JSON มาตรฐานไม่รองรับ comment ส่วน JSONC (JSON with Comments) อนุญาตให้ใส่ // และ /* */ ได้ ใช้ใน VS Code config เช่น tsconfig.json และ settings.json

JSON5 เป็น superset ของ JSON ที่รองรับ single quotes, trailing commas, comment, และ unquoted keys คล้าย JavaScript object แต่ไม่ใช่มาตรฐาน ECMA ต้องใช้ parser แยก

ช่วยให้เห็นโครงสร้าง JSON ชัดเจน ค้นหา key ที่ต้องการได้ง่าย ระบุตำแหน่ง syntax error ได้ทันที และเปรียบเทียบ JSON สองชุดได้สะดวกเมื่อจัดรูปแบบเหมือนกัน

อ้างอิง

JSON.org — Introducing JSON
MDN Web Docs — JSON.parse()
MDN Web Docs — JSON.stringify()
RFC 8259 — The JavaScript Object Notation (JSON) Data Interchange Format

เครื่องมือนี้ประมวลผลข้อมูลในเบราว์เซอร์ของคุณ ไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ อย่างไรก็ตาม ไม่ควรใช้กับข้อมูลที่เป็นความลับสำคัญ เช่น password หรือ API key

เครื่องมือที่เกี่ยวข้อง

สร้าง QR Code

สร้าง QR Code จาก URL ข้อความ WiFi เบอร์โทร อีเมล ออนไลน์ฟรี

แปลง Base64 / URL Encode

เข้ารหัส ถอดรหัส Base64 และ URL Encode/Decode ออนไลน์

คำนวณ BMI

คำนวณค่าดัชนีมวลกาย (BMI) เพื่อประเมินรูปร่างและความเสี่ยงด้านสุขภาพ

ดูเครื่องมือนักพัฒนาทั้งหมด