Developer

JSON คืออะไร Format Validate และแก้ Error อย่างมือโปร

📅 17 เมษายน 2569 ⏱ อ่าน 8 นาที ✍️ madestool

🛠️ JSON เป็น format ที่ developer ทุกคนต้องจัดการทุกวัน บทความนี้รวมทุกอย่างตั้งแต่ syntax rules จนถึงวิธีแก้ error ที่พบบ่อยที่สุด

JSON คืออะไร ทำไมถึงเป็น format ยอดนิยม

JSON (JavaScript Object Notation) คือ format สำหรับแลกเปลี่ยนข้อมูลที่เป็นข้อความ (text-based) อ่านได้ทั้งมนุษย์และคอมพิวเตอร์ Douglas Crockford กำหนดสเปคในช่วงต้นปี 2000 และกลายเป็น standard ของ Web API ในปัจจุบัน

เหตุผลที่ JSON ชนะ XML: กระทัดรัดกว่า 30–40%, parse ง่ายกว่า, รองรับทุก programming language และ syntax ตรงกับ JavaScript object โดยตรง ใช้ใน REST API, config files (package.json, tsconfig.json), localStorage, database (MongoDB), และอื่นๆ อีกมาก

โครงสร้าง JSON ที่ถูกต้อง — 6 data types

JSON รองรับ data type เพียง 6 ชนิด:

String: ต้องใช้ double quotes เท่านั้น: "สวัสดี"
Number: integer หรือ float: 42, 3.14
Boolean: ตัวพิมพ์เล็ก: true / false
Null: ตัวพิมพ์เล็ก: null
Array: รายการในวงเล็บเหลี่ยม: [1, 2, 3]
Object: key-value ในวงเล็บปีกกา: {"name": "สมชาย"}

// ตัวอย่าง JSON ที่ถูกต้องสมบูรณ์
{
  "userId": 1001,
  "name": "สมชาย ใจดี",
  "isActive": true,
  "score": 95.5,
  "tags": ["dev", "thai"],
  "address": null
}

ข้อผิดพลาดที่พบบ่อยและวิธีแก้

❌ Trailing comma — ห้ามมี comma หลัง item สุดท้าย

{"name": "สมชาย", "age": 30,} ← ผิด
{"name": "สมชาย", "age": 30} ← ถูก

❌ Single quotes — ต้องใช้ double quotes เท่านั้น

{'name': 'สมชาย'} ← ผิด (JavaScript syntax ไม่ใช่ JSON)
{"name": "สมชาย"} ← ถูก

❌ Undefined / NaN / Infinity — ไม่มีใน JSON

{"value": undefined} ← ผิด
{"value": null} ← ถูก (ใช้ null แทน)

❌ Comment — JSON ไม่รองรับ comment

{"name": "สมชาย" // ชื่อผู้ใช้} ← ผิด

ใช้ JSON Formatter & Validator เพื่อ paste JSON เข้าไปและตรวจสอบ error พร้อม highlight จุดที่ผิดได้ทันที

Pretty Print vs Minify — ใช้เมื่อไหร่

Pretty Print (มี whitespace + indent) ใช้สำหรับอ่านและ debug ทำให้เห็นโครงสร้างชัดเจน แต่ file size ใหญ่กว่า

Minify (ลบ whitespace ทั้งหมด) ใช้สำหรับ production เพื่อลด payload size ใน API response JSON 10 KB อาจลดเหลือ 7 KB หลัง minify ช่วยให้ response เร็วขึ้น

ใน production API ควร minify และใช้ gzip compression ร่วมกัน ลด size ได้อีก 70–90% JSON 100 KB → gzip → ประมาณ 10–20 KB

JSON Schema — Validate โครงสร้างก่อนใช้งาน

JSON Schema คือ JSON ที่ใช้กำหนดโครงสร้างของ JSON อื่น ช่วย validate ว่า API response มีครบทุก field และ type ถูกต้องก่อนนำไปประมวลผล ป้องกัน runtime error ที่น่าปวดหัว

ตัวอย่าง schema สำหรับ user object:

{
  "type": "object",
  "required": ["userId", "name"],
  "properties": {
    "userId": { "type": "integer" },
    "name": { "type": "string", "minLength": 1 }
  }
}

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

Q: JSON กับ JavaScript Object ต่างกันยังไง?

JavaScript Object ยืดหยุ่นกว่า รองรับ single quotes, trailing comma, comment, undefined, function, Date ส่วน JSON เป็น subset ของ JS Object ที่ strict กว่า และเป็น language-agnostic ใช้ได้กับทุก programming language

Q: JSON vs XML ควรเลือกอันไหน?

ปัจจุบัน JSON เหมาะสมกว่าสำหรับ Web API เกือบทุกกรณี กระทัดรัดกว่า parse ง่ายกว่า และรองรับ JavaScript native ส่วน XML ยังใช้อยู่ใน enterprise systems (SOAP), document formats (Office XML), RSS feeds และระบบที่ต้องการ namespace หรือ schema ที่ซับซ้อน

Q: JSON ปลอดภัยไหม มีความเสี่ยงอะไรบ้าง?

JSON เองปลอดภัย แต่การ parse JSON จาก user input โดยไม่ validate มีความเสี่ยง ควร validate ด้วย JSON Schema ก่อนใช้งาน และระวัง JSON Injection เมื่อ embed JSON ใน HTML (ใช้ JSON.stringify ที่ escape HTML entities)

Q: JSON รองรับ Date/Time ยังไง?

JSON ไม่มี native Date type ต้องใช้ string แทน แนะนำใช้ ISO 8601 format เช่น "2026-04-17T10:30:00Z" ซึ่งเป็น standard สากล และ parse ได้ด้วย new Date() ใน JavaScript หรือ library อื่นๆ ทุกภาษา

🔧 Format และ Validate JSON ออนไลน์

Paste JSON เข้าไป ระบบจะ validate ทันที แสดง error ที่จุดที่ผิด และ format ให้อ่านง่ายหรือ minify ให้กระทัดรัด

เปิด JSON Formatter →

ทำงาน 100% บน browser · JSON ไม่ถูกส่งออกจากเครื่อง · ใช้งานฟรี