การทำงานกับ JSON

การทำงานกับ JSON ใน JavaScript

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการจัดการ Error และการใช้งาน Modules ใน JavaScript ซึ่งเป็นส่วนสำคัญในการพัฒนาโปรแกรมที่มีคุณภาพ ในบทนี้ เราจะมาทำความรู้จักกับ JSON (JavaScript Object Notation) ซึ่งเป็นรูปแบบข้อมูลที่ใช้กันอย่างแพร่หลายในการแลกเปลี่ยนข้อมูลระหว่าง Server และ Client หรือระหว่างระบบต่างๆ JSON มีความสำคัญอย่างยิ่งในการพัฒนา Web Application ที่มีการรับส่งข้อมูลผ่าน API

JSON คืออะไร?

JSON เป็นรูปแบบข้อมูลที่ใช้ข้อความ (text-based) ที่มีโครงสร้างที่ง่ายต่อการอ่านและเขียน ทั้งสำหรับมนุษย์และเครื่องจักร JSON มาจาก JavaScript Object Syntax แต่เป็นรูปแบบข้อมูลที่เป็นอิสระจากภาษาโปรแกรมใดๆ ทำให้สามารถใช้งานได้กับหลากหลายภาษา รวมถึง JavaScript

โครงสร้างพื้นฐานของ JSON ประกอบด้วย:

Object: ชุดของคู่ Key-Value ที่อยู่ในเครื่องหมาย {}
Array: ชุดของข้อมูลที่เรียงกันในเครื่องหมาย []
Key: สตริงที่อยู่ในเครื่องหมาย ""
Value: สามารถเป็นได้ทั้ง String, Number, Boolean, Null, Object, หรือ Array

ตัวอย่าง JSON:

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  },
  "courses": ["Math", "Science", "History"]
}

JSON เป็นที่นิยมเนื่องจากมีความเรียบง่าย, อ่านง่าย, และสามารถแปลงเป็น Object ใน JavaScript ได้อย่างง่ายดาย

การแปลง JSON String เป็น JavaScript Object ด้วย `JSON.parse()`

เมื่อเราได้รับข้อมูลในรูปแบบ JSON String เราจำเป็นต้องแปลงมันเป็น JavaScript Object เพื่อให้สามารถใช้งานข้อมูลนั้นในโปรแกรมของเราได้ เราสามารถทำได้โดยใช้ฟังก์ชัน JSON.parse()

ไวยากรณ์ของ `JSON.parse()`

JSON.parse(text[, reviver])

text: JSON String ที่ต้องการแปลง
reviver (Optional): ฟังก์ชันที่ใช้ในการปรับเปลี่ยนค่า (value) ของ Object ก่อนที่จะถูกส่งคืน

ตัวอย่างการใช้งาน `JSON.parse()`

const jsonString = '{"name": "Jane Doe", "age": 25, "city": "New York"}';

const jsObject = JSON.parse(jsonString);

console.log(jsObject.name); // Output: Jane Doe
console.log(jsObject.age);  // Output: 25
console.log(jsObject.city); // Output: New York

ในตัวอย่างนี้ เรามี JSON String ที่เก็บข้อมูลเกี่ยวกับบุคคล เมื่อใช้ JSON.parse() เราจะแปลง String นี้เป็น JavaScript Object และสามารถเข้าถึงข้อมูลต่างๆ ได้ผ่าน Key ของ Object นั้น

การใช้งาน `reviver` Function

reviver function เป็นฟังก์ชันเสริมที่สามารถใช้ในการปรับเปลี่ยนค่าของ Object ที่ได้จากการแปลง JSON String ตัวอย่างเช่น เราสามารถแปลง String ที่เป็นวันที่ให้เป็น Date Object ได้

const jsonString = '{"date": "2023-10-27T10:00:00.000Z"}';

const jsObject = JSON.parse(jsonString, (key, value) => {
  if (key === 'date') {
    return new Date(value);
  }
  return value;
});

console.log(jsObject.date); // Output: Fri Oct 27 2023 17:00:00 GMT+0700 (เวลาอินโดจีน)

ในตัวอย่างนี้ เราใช้ reviver function เพื่อตรวจสอบว่า Key คือ date หรือไม่ ถ้าใช่ เราจะแปลง Value ให้เป็น Date Object มิฉะนั้นเราจะคืนค่าเดิม

การแปลง JavaScript Object เป็น JSON String ด้วย `JSON.stringify()`

ในทางกลับกัน หากเราต้องการส่งข้อมูลจาก JavaScript Object ไปยัง Server หรือบันทึกข้อมูลลงในไฟล์ เราจำเป็นต้องแปลง Object นั้นเป็น JSON String เราสามารถทำได้โดยใช้ฟังก์ชัน JSON.stringify()

ไวยากรณ์ของ `JSON.stringify()`

JSON.stringify(value[, replacer[, space]])

value: JavaScript Object ที่ต้องการแปลง
replacer (Optional): ฟังก์ชันหรือ Array ที่ใช้ในการกรองข้อมูลก่อนที่จะถูกแปลง
space (Optional): String หรือ Number ที่ใช้ในการจัดรูปแบบ JSON String ให้อ่านง่ายขึ้น

ตัวอย่างการใช้งาน `JSON.stringify()`

const jsObject = {
  name: "John Doe",
  age: 30,
  city: "Anytown"
};

const jsonString = JSON.stringify(jsObject);

console.log(jsonString); // Output: {"name":"John Doe","age":30,"city":"Anytown"}

ในตัวอย่างนี้ เรามี JavaScript Object ที่เก็บข้อมูลเกี่ยวกับบุคคล เมื่อใช้ JSON.stringify() เราจะแปลง Object นี้เป็น JSON String

การใช้งาน `replacer` Function

replacer function เป็นฟังก์ชันเสริมที่สามารถใช้ในการกรองข้อมูลก่อนที่จะถูกแปลงเป็น JSON String ตัวอย่างเช่น เราสามารถละเว้นบาง Property ที่ไม่ต้องการส่งออก

const jsObject = {
  name: "John Doe",
  age: 30,
  city: "Anytown",
  privateData: "secret"
};

const jsonString = JSON.stringify(jsObject, (key, value) => {
  if (key === 'privateData') {
    return undefined;
  }
  return value;
});

console.log(jsonString); // Output: {"name":"John Doe","age":30,"city":"Anytown"}

ในตัวอย่างนี้ เราใช้ replacer function เพื่อตรวจสอบว่า Key คือ privateData หรือไม่ ถ้าใช่ เราจะคืนค่า undefined ซึ่งจะทำให้ Property นั้นถูกละเว้นจากการแปลงเป็น JSON String

การใช้งาน `replacer` Array

นอกจาก Function แล้ว replacer ยังสามารถเป็น Array ของ Keys ที่ต้องการแปลงเป็น JSON String ได้

const jsObject = {
  name: "John Doe",
  age: 30,
  city: "Anytown",
  privateData: "secret"
};

const jsonString = JSON.stringify(jsObject, ['name', 'age', 'city']);

console.log(jsonString); // Output: {"name":"John Doe","age":30,"city":"Anytown"}

ในตัวอย่างนี้ เราใช้ replacer เป็น Array ที่ระบุ Keys ที่เราต้องการแปลงเป็น JSON String เท่านั้น

การใช้งาน `space` Parameter

space parameter ใช้ในการจัดรูปแบบ JSON String ให้อ่านง่ายขึ้น สามารถเป็นได้ทั้ง String หรือ Number

const jsObject = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown"
  }
};

const jsonString1 = JSON.stringify(jsObject, null, 2); // ใช้ 2 spaces สำหรับ indentation
const jsonString2 = JSON.stringify(jsObject, null, '\t'); // ใช้ tab สำหรับ indentation

console.log(jsonString1);
// Output:
// {
//   "name": "John Doe",
//   "age": 30,
//   "address": {
//     "street": "123 Main St",
//     "city": "Anytown"
//   }
// }

console.log(jsonString2);
// Output:
// {
//  "name": "John Doe",
//  "age": 30,
//  "address": {
//   "street": "123 Main St",
//   "city": "Anytown"
//  }
// }

ในตัวอย่างนี้ เราใช้ space parameter เพื่อจัดรูปแบบ JSON String ให้อ่านง่ายขึ้น โดยใช้ 2 spaces หรือ tab สำหรับ indentation

การ Validate JSON

ก่อนที่จะนำ JSON String ไปใช้งาน ควรตรวจสอบก่อนว่า String นั้นเป็น JSON ที่ถูกต้องหรือไม่ เพื่อป้องกัน Error ที่อาจเกิดขึ้น เราสามารถทำได้โดยใช้ try...catch block ร่วมกับ JSON.parse()

function isValidJSON(jsonString) {
  try {
    JSON.parse(jsonString);
    return true;
  } catch (error) {
    return false;
  }
}

const validJSON = '{"name": "John Doe", "age": 30}';
const invalidJSON = '{"name": "John Doe", age: 30}'; // Missing quotes around age

console.log(isValidJSON(validJSON));   // Output: true
console.log(isValidJSON(invalidJSON));  // Output: false

ในตัวอย่างนี้ เราสร้างฟังก์ชัน isValidJSON() ที่รับ JSON String เป็น Parameter และใช้ JSON.parse() ภายใน try...catch block หาก JSON.parse() ทำงานได้สำเร็จ แสดงว่า JSON String นั้นถูกต้อง มิฉะนั้นจะเกิด Error และเราจะ Return false

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการทำงานกับ JSON ใน JavaScript ซึ่งครอบคลุมถึงการแปลง JSON String เป็น JavaScript Object ด้วย JSON.parse() และการแปลง JavaScript Object เป็น JSON String ด้วย JSON.stringify() รวมถึงการ Validate JSON String เพื่อให้แน่ใจว่าข้อมูลที่ได้รับมาถูกต้อง การเข้าใจและใช้งาน JSON ได้อย่างถูกต้องเป็นสิ่งสำคัญในการพัฒนา Web Application ที่มีการรับส่งข้อมูลผ่าน API

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับ Regular Expressions เบื้องต้น ซึ่งเป็นเครื่องมือที่มีประโยชน์ในการจัดการ String และ Pattern Matching

การทำงานกับ JSON