การใช้งาน Parse JSON to object ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

# การใช้งาน Parse JSON เป็น object ในภาษา JavaScript อย่างเข้าใจ

สวัสดีครับผู้อ่านที่น่ารักทุกท่าน! ในโลกแห่งการพัฒนาเว็บแอปพลิเคชันที่มีการเปลี่ยนแปลงอย่างไม่หยุดยั้งนี้ มีหนึ่งเทคโนโลยีที่เข้ามามีบทบาทสำคัญ กล่าวคือ "JSON" ซึ่งสำหรับนักพัฒนา JavaScript การทำความเข้าใจการ "Parse JSON เป็น object" ถือเป็นสิ่งที่จำเป็นไม่แพ้กับการเรียนรู้ฟังก์ชันต่างๆ เลยทีเดียว

JSON (JavaScript Object Notation) คือ รูปแบบของข้อมูลที่ใช้สำหรับแลกเปลี่ยนข้อมูลบนเว็บที่อ่านได้ง่ายทั้งสำหรับเครื่องจักรและมนุษย์ มันเป็นภาษากลางในการสื่อสารข้อมูลระหว่าง client กับ server หรือแม้กระทั่งการเก็บข้อมูลในรูปแบบที่ประหยัดและมีประสิทธิภาพ

การเปิดผนึก JSON

มาดูกันว่าการแปลงข้อมูล JSON เป็น object ในภาษา JavaScript ทำเช่นไร:

ตัวอย่างที่ 1: Parse JSON ที่เป็น Object

 // JSON ข้อความที่มีโครงสร้างเป็น object
const jsonString = '{"name":"Jonas","age":28,"city":"Berlin"}';

// Parse JSON ข้อความเพื่อเป็น JavaScript object
const userObject = JSON.parse(jsonString);

console.log(userObject.name);  // Output: Jonas
console.log(userObject.age);   // Output: 28
console.log(userObject.city);  // Output: Berlin

ในตัวอย่างนี้, `JSON.parse()` ทำหน้าที่แปลง JSON string เป็น object ซึ่งเราสามารถเข้าถึงค่าโดยใช้ dot notation.

ตัวอย่างที่ 2: Parse JSON ที่เป็น Array

 // JSON ข้อความที่มีโครงสร้างเป็น array ของ objects
const jsonStringArray = '[{"name":"Anna","age":22},{"name":"Marco","age":30}]';

// Parse JSON ข้อความเป็น JavaScript array
const userArray = JSON.parse(jsonStringArray);

console.log(userArray[0].name);  // Output: Anna
console.log(userArray[1].age);   // Output: 30

ตัวอย่างที่ 3: Parse JSON ที่มี Date

 // JSON ข้อความที่มีโครงสร้างเป็น object และมีข้อมูลเป็น date
const jsonStringWithDate = '{"name":"Lena","birthdate":"1985-05-15T09:30:00.000Z"}';

// Parse JSON ข้อความเป็น JavaScript object
// และแปลง string เป็น object ของ Date
const userWithDate = JSON.parse(jsonStringWithDate, (key, value) =>
  key === "birthdate" ? new Date(value) : value
);

console.log(userWithDate.name);       // Output: Lena
console.log(userWithDate.birthdate);  // Output: [object Date]

ในตัวอย่างที่สามเราใช้ตัวแปรฟังก์ชันบน JSON.parse() เพื่อทำการแปลงวันที่จาก string เป็น Date object.

Usecase ในโลกจริง

อ่านแล้วคงสงสัยว่า "การ Parse JSON นี้มีประโยชน์อย่างไรในโลกจริง?" เพื่อทำความเข้าใจยิ่งขึ้น ลองนึกถึง usecase ต่อไปนี้:

1. สร้างเว็บ API: เมื่อนักพัฒนาสร้าง RESTful API ที่ client สามารถร้องขอข้อมูลผ่าน HTTP และได้รับคำตอบกลับมาเป็น JSON ซึ่งจำเป็นต้องมีการ Parse JSON เพื่อใช้ข้อมูลนั้นในแอปพลิเคชันของตน.

2. การจัดเก็บข้อมูลลงใน Local Storage: หลายต่อหลายครั้ง เราต้องการเก็บข้อมูลสำคัญไว้ใน Local Storage ของ browser ซึ่งเก็บข้อมูลเป็น string ดังนั้น JSON จะถูก stringify ก่อนเก็บ และเมื่อต้องการใช้ข้อมูล เราต้อง parse JSON string เหล่านั้นกลับมาเป็น object อีกครั้ง.

การมีความสามารถในการจัดการกับ JSON จึงถือเป็นสกิลที่จำเป็นมาก หากคุณเป็นนักพัฒนาที่ชื่นชอบในการค้นคว้าและอยากพัฒนาทักษะของคุณไปอีกขั้น อย่าลืมมองหาหลักสูตรดีๆ ที่สามารถช่วยเสริมสร้างความรู้ในด้านนี้ได้ สำหรับใครที่อยากจะเรียนรู้โปรแกรมมิงอย่างจริงจัง ที่ EPT (Expert-Programming-Tutor) เราพร้อมเป็นมิตรสหายการเรียนรู้ เพื่อให้คุณสามารถต่อยอดความรู้ และนำไปปรับใช้ในโลกการทำงานได้จริง ติดต่อเราได้ทันทีเพื่อพูดคุยเรื่องหลักสูตรที่เหมาะสมกับคุณ!

หวังว่าบทความนี้จะช่วยให้คุณเข้าใจการ parse JSON เป็น object ใน JavaScript ได้มากยิ่งขึ้น และนำไปสู่การพัฒนาแอปพลิเคชันที่ราบรื่นและอัจฉริยะต่อไป!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง

Tag ที่น่าสนใจ: json parse object javascript web_development restful_api local_storage programming front-end_development data_exchange

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM

แผนที่ ที่ตั้งของอาคารของเรา

EXPERT-PROGRAMMING-TUTOR
รับสอนเขียนโปรแกรมคอมพิวเตอร์

JavaScript

การใช้งาน Parse JSON to object ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

การเปิดผนึก JSON

Usecase ในโลกจริง

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

แผนผังการเรียนเขียนโปรแกรม

Link อื่นๆ

ติดต่อเราได้ที่

EXPERT-PROGRAMMING-TUTOR รับสอนเขียนโปรแกรมคอมพิวเตอร์

JavaScript

การใช้งาน Parse JSON to object ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

การเปิดผนึก JSON

Usecase ในโลกจริง

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

แผนผังการเรียนเขียนโปรแกรม

Link อื่นๆ

ติดต่อเราได้ที่

EXPERT-PROGRAMMING-TUTOR
รับสอนเขียนโปรแกรมคอมพิวเตอร์