การจัดรูปแบบและตรวจสอบ JSON: คู่มืออ้างอิงฉบับย่อสำหรับนักพัฒนา

Code on screen

JSON (JavaScript Object Notation) คือภาษากลางของ web API ออกแบบมาให้เรียบง่าย — แต่เพียงแค่ขาดเครื่องหมายจุลภาคตัวเดียวหรือวงเล็บปีกกาไม่ครบคู่ ก็อาจทำให้แอปพลิเคชันพังได้อย่างเงียบๆ นี่คือทุกสิ่งที่คุณต้องรู้เพื่อทำงานกับ JSON อย่างมั่นใจ

ไวยากรณ์ JSON ใน 90 วินาที

JSON มีประเภทค่าทั้งหมดหกแบบ:

{
  "string": "hello world",
  "number": 42,
  "boolean": true,
  "null_value": null,
  "array": [1, 2, 3],
  "object": { "nested": "value" }
}

กฎที่มักทำให้สะดุด:

Key ต้องเป็น string ที่ใส่เครื่องหมายคำพูดคู่ — {name: "Alice"} ไม่ใช่ JSON ที่ถูกต้อง
ห้ามใส่เครื่องหมายจุลภาคท้าย — [1, 2, 3,] ไม่ถูกต้อง
ไม่มี comment — JSON ไม่รองรับ // หรือ /* */
String ต้องใช้เครื่องหมายคำพูดคู่เท่านั้น — เครื่องหมายคำพูดเดี่ยวใช้ไม่ได้
ตัวเลขห้ามมีเลขศูนย์นำหน้า — 007 ไม่ถูกต้อง

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

1. เครื่องหมายจุลภาคท้าย

// Invalid
{ "a": 1, "b": 2, }

// Valid
{ "a": 1, "b": 2 }

2. String ที่ใช้เครื่องหมายคำพูดเดี่ยว

// Invalid
{ 'name': 'Alice' }

// Valid
{ "name": "Alice" }

3. Key ที่ไม่ใส่เครื่องหมายคำพูด

// Invalid
{ name: "Alice" }

// Valid
{ "name": "Alice" }

4. ค่า Undefined หรือ NaN — ค่าเหล่านี้มีใน JavaScript แต่ไม่มีใน JSON ให้ใช้ null แทน

การจัดรูปแบบ vs การย่อขนาด

JSON แบบ Pretty-print (จัดรูปแบบแล้ว) ใช้การเยื้องบรรทัดและขึ้นบรรทัดใหม่เพื่อให้อ่านง่าย:

{
  "user": {
    "id": 1,
    "name": "Alice"
  }
}

JSON แบบ Minified ตัด whitespace ทั้งหมดออก:

{"user":{"id":1,"name":"Alice"}}

ใช้ JSON แบบจัดรูปแบบในไฟล์ config และ source code ส่วน JSON แบบ minified ใช้ใน API response และการจัดเก็บข้อมูลเพื่อลดขนาด payload เครื่องมือ JSON Formatter ของเราสลับระหว่างสองแบบได้ด้วยคลิกเดียว

การตรวจสอบด้วย JSON Schema

JSON Schema ช่วยให้คุณกำหนดโครงสร้างที่คาดหวังของเอกสาร JSON และตรวจสอบข้อมูลตามโครงสร้างนั้น สิ่งนี้จำเป็นมากสำหรับ API contract และการตรวจสอบไฟล์ config

Schema ตัวอย่างอย่างง่าย:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "required": ["name", "age"],
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "integer", "minimum": 0 }
  }
}

Schema นี้จะปฏิเสธ object ที่ขาด name หรือ age หรือกรณีที่ age เป็นค่าลบ เครื่องมือ JSON Schema Validator ให้คุณวาง schema และข้อมูลเพื่อตรวจสอบแบบ real time

การสร้าง TypeScript types จาก JSON

หากคุณได้รับ JSON response จาก API และต้องการ TypeScript interface ให้วาง JSON ลงใน converter JSON to TypeScript ของเรา มันจะอนุมาน type จากโครงสร้างข้อมูล:

Input:

{ "id": 1, "name": "Alice", "active": true, "tags": ["admin"] }

Output:

interface Root {
  id: number;
  name: string;
  active: boolean;
  tags: string[];
}

JSONPath: การ query ข้อมูลแบบซ้อน

JSONPath มีความสัมพันธ์กับ JSON เช่นเดียวกับที่ XPath มีกับ XML — เป็นภาษา query สำหรับดึงค่าจากโครงสร้างที่ซ้อนกัน ไวยากรณ์พื้นฐาน:

Expression	ความหมาย
`$.store.book`	Key `book` ภายใน `store`
`$.store.book[0]`	หนังสือเล่มแรก
`$.store.book[*].title`	ชื่อหนังสือทุกเล่ม
`$..price`	ค่า `price` ทั้งหมดที่อยู่ในเอกสาร

เครื่องมือ JSON Path Finder ให้คุณคลิกที่ค่าใดก็ได้ใน JSON tree ที่แสดงผล แล้วคัดลอก path โดยอัตโนมัติ