สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
ยุคสมัยที่ข้อมูลกลายเป็นทรัพยากรสำคัญ, การแลกเปลี่ยนข้อมูลอย่างมีประสิทธิภาพจึงเป็นหัวใจหลักของแอปพลิเคชันสมัยใหม่ หนึ่งในเครื่องมือที่ทรงพลังและเป็นมาตรฐานในการส่งข้อมูลระหว่างเซิร์ฟเวอร์และเว็บแอปพลิเคชันคือ JSON (JavaScript Object Notation) ซึ่งเป็นฟอร์มแบบข้อมูลที่เขียนง่าย อ่านเข้าใจง่าย และเป็นที่ยอมรับในการใช้งานกับภาษา JavaScript ถึงแม้ว่าจะใช้งานได้กับภาษาโปรแกรมมิ่งอื่นๆ ด้วยเช่นกัน
JSON เป็นรูปแบบของข้อมูลที่ใช้สำหรับการเก็บค่าข้อมูลในรูปแบบคีย์-แวลู ซึ่งมีความคล้ายคลึงกับวัตถุใน JavaScript (Objects) นั่นทำให้การแปลงข้อมูลระหว่าง JSON กับจาวาสคริปต์นั้นทำได้ง่ายและรวดเร็ว
การแปลงข้อมูล JSON เป็นข้อมูลที่ JavaScript สามารถเข้าใจได้
เราสามารถแปลงสตริง JSON เป็นวัตถุ JavaScript ได้ด้วยคำสั่ง `JSON.parse()` การทำเช่นนี้จะช่วยให้เราสามารถจัดการกับข้อมูลในรูปแบบวัตถุ ซึ่งเป็นรูปแบบที่เข้าใจง่ายและสะดวกต่อการเข้าถึงและปรับเปลี่ยนข้อมูลได้
ตัวอย่างโค้ดเพื่อแปลงสตริง JSON เป็นวัตถุ JavaScript:
let jsonString = '{"name":"Somchai","age":30,"city":"Bangkok"}';
let userObject = JSON.parse(jsonString);
console.log(userObject.name); // Somchai
console.log(userObject.age); // 30
การแปลงวัตถุ JavaScript เป็นสตริง JSON
ในทางตรงกันข้าม, เราต้องการส่งข้อมูลจากคลายเอ็นต์ไปยังเซิร์ฟเวอร์ในรูปแบบ JSON คำสั่ง `JSON.stringify()` ทำหน้าที่แปลงวัตถุ JavaScript ให้เป็นสตริง JSON เพื่อสามารถส่งข้อมูลผ่าน HTTP ได้
ตัวอย่างโค้ดเพื่อแปลงวัตถุ JavaScript เป็นสตริง JSON:
let userObject = {
name: "Somsri",
age: 28,
city: "Chiang Mai"
};
let jsonString = JSON.stringify(userObject);
console.log(jsonString); // {"name":"Somsri","age":28,"city":"Chiang Mai"}
หนึ่งใน Use Cases ที่สำคัญของการใช้งาน JSON กับ JavaScript คือการเรียกใช้ API ท่ามกลางโค้ด JavaScript สำหรับเชื่อมต่อและรับข้อมูลจากเซิร์ฟเวอร์ ซึ่งตัวอย่างโค้ดต่อไปนี้จะประกอบการเรียกข้อมูลจากเซิร์ฟเวอร์ผ่าน API และแสดงค่าในหน้าเว็บ:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
// จัดการข้อมูลอย่างต่อไป
})
.catch(error => {
console.error('Error:', error);
});
การใช้งาน JSON ในภาษา JavaScript ไม่ได้จำกัดอยู่เพียงแค่การส่งข้อมูลระหว่างเซิร์ฟเวอร์และคลายเอ็นต์เท่านั้น ยังรวมไปถึงการเก็บข้อมูลชั่วคราวใน Local Storage และการแลกเปลี่ยนข้อมูลระหว่างเว็บแอปพลิเคชันกับเซิร์ฟเวอร์ภายนอกผ่าน Web APIs การใช้งานรูปแบบข้อมูลที่มีความยืดหยุ่นและเข้าใจได้ง่ายนี้เป็นหัวใจสำคัญที่สนับสนุนให้โลกของการพัฒนาเว็บไซต์และแอปพลิเคชันก้าวหน้าไปอย่างไม่มีหยุดยั้ง
ความรู้พื้นฐานเกี่ยวกับ JSON และ JavaScript คือสิ่งที่ผู้เรียนสามารถแสวงหาได้จากคอร์สเขียนโปรแกรมทั่วไป อย่างที่ Expert-Programming-Tutor (EPT) เป็นต้น ที่นี่ผู้เรียนจะได้ศึกษาถึงการใช้งานเทคนิคต่างๆ ผ่านการปฏิบัติตามสถานการณ์จริง ส่วนได้ความเข้มข้นของความรู้ที่จะถ่ายทอดออกมาเป็นโค้ดที่ประหยัดและมีประสิทธิภาพ ทั้งนี้ทั้งนั้น การพัฒนาทักษะเหล่านี้จะเป็นประตูสู่โอกาสทางอาชีพที่กว้างใหญ่ในภาคส่วนของเทคโนโลยีสารสนเทศ ไม่ว่าจะเป็นนักพัฒนาเว็บไซต์, นักออกแบบ UI/UX, หรือนักวิเคราะห์ข้อมูล.
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: json javascript api web_development data_exchange json.parse() json.stringify() http fetch local_storage web_apis programming_languages object-oriented_programming data_manipulation information_exchange
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com