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

เริ่มต้นด้วยบทประพันธ์ที่คมคายและยั่วยวนจิตใจของคุณผู้อ่านผู้ซึ่งมีความใฝ่ฝันที่จะเป็นนักพัฒนาโปรแกรมมิ่งที่เอาชนะใจเครื่องจักรด้วยบรรทัดโค้ดอันละเอียดและประณีต...

สวัสดีครับคุณผู้อ่านที่ตะวันนา! ในบทความนี้ เราจะพาท่านโซ่ไซเบอร์ดำดิ่งสู่ห้วงลึกของโลก "JSON" ซึ่งเป็นมาตรฐานข้อมูลในรูปแบบตัวอักษรที่ธุรกิจและแอปพลิเคชันต่างๆชื่นชอบ เราจะฝึกการวิเคราะห์และเข้าใจวิธีใช้งาน JSON เพื่อแปลงข้อมูลสู่ array ในภาษา JavaScript ซึ่งเป็นภาษาที่เป็นพื้นฐานของเว็บแอปพลิเคชันสมัยนี้ พร้อมตัวอย่างโค้ดที่ช่วยให้คุณได้เปลี่ยนการเรียนรู้เป็นประสบการณ์จริง - บางทีอาจจะกระตุ้นให้คุณอยากรู้อยากเห็นและอยากลองเรียนรู้มากขึ้นที่ EPT ซึ่งเป็นบ้านแห่งความรู้สำหรับนักพัฒนาในโลกอนาคตนี้

ความรู้เบื้องต้นเกี่ยวกับ JSON ใน JavaScript

JSON (JavaScript Object Notation) เป็นไฟล์ที่มีโครงสร้างข้อมูลในรูปแบบของตัวอักษรซึ่งอ่านและเขียนได้ง่าย มักใช้ในการแลกเปลี่ยนข้อมูลระหว่างเว็บเซิร์ฟเวอร์และเว็บไคลเอนต์ เรามาเริ่มกันที่ตัวอย่าง JSON ง่ายๆ:

 {
  "students": [
    {"name": "ไพรัช", "score": 85},
    {"name": "สุภาวี", "score": 92},
    {"name": "ประแสร์", "score": 76}
  ]
}

โครงสร้างข้างต้นแสดงถึงข้อมูลของนักเรียนที่มีชื่อและคะแนนสอบ แต่ในรูปแบบของ JSON ซึ่งเป็นเพียงข้อความ ดังนั้นเราต้องแปลงข้อมูลนี้ให้กลายเป็น array หรือ object ที่ JavaScript สามารถจัดการได้

วิธีแปลง JSON เป็น Array ใน JavaScript

การแปลง JSON เป็น array เริ่มต้นด้วยการใช้ function `JSON.parse()` ซึ่งมีไว้เพื่อแปลงข้อความที่อยู่ในรูปแบบ JSON ให้เป็น object หรือ array ที่สามารถใช้สำหรับการพัฒนาใน JavaScript. ดังตัวอย่างต่อไปนี้:

 const jsonText = '{"students": [{"name": "ไพรัช", "score": 85}, {"name": "สุภาวี", "score": 92}, {"name": "ประแสร์", "score": 76}]}';
const obj = JSON.parse(jsonText);

console.log(obj.students);
// จะแสดงข้อมูล array ของนักเรียนออกมาใน console

ในตัวอย่างนี้, เราได้ทำการสร้างตัวแปรที่ชื่อว่า `jsonText` ซึ่งเก็บค่าข้อมูล JSON แล้วใช้ `JSON.parse()` เพื่อแปลงข้อความนั้นเป็น object. หลังจากนั้น เราจะสามารถเข้าถึงค่า array ของนักเรียนผ่าน key ที่ชื่อว่า `students`.

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

ตัวอย่างที่ 1: การแปลง JSON สำหรับการบริหารจัดการข้อมูลนักเรียน

 const studentJSON = '{"students": [{"name": "จริยา", "score": 88}, {"name": "คมสัน", "score": 79}]}';
const studentArray = JSON.parse(studentJSON).students;

studentArray.forEach(student => {
  console.log(`ชื่อ: ${student.name}, คะแนน: ${student.score}`);
});

ตัวอย่างที่ 2: การใช้งาน JSON ในการโหลดข้อมูลจากเซิร์ฟเวอร์

 fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data));

ตัวอย่างที่ 3: การใช้งาน JSON กับแอปพลิเคชันที่ต้องการปรับข้อมูลต่างๆเป็นชุดคำสั่ง

 const configurationJSON = '{"settings": {"theme": "dark", "notifications": true}}';
const configuration = JSON.parse(configurationJSON);

console.log(`Theme: ${configuration.settings.theme}`);
console.log(`Notifications: ${configuration.settings.notifications}`);

Usecase ในโลกจริง

JSON ไม่ได้เป็นเพียงแค่สิ่งที่นักพัฒนาใช้เล่นๆ แต่มันเป็นหัวใจของการสื่อสารข้อมูลในหลายๆ แอปพลิเคชัน เช่น:

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

หากความคิดนี้ทำให้คุณรู้สึกตื่นเต้นและอยากเรียนรู้มากขึ้น, อย่ารีรอที่จะลงทะเบียนกับเราที่ EPT, ที่พัฒนาโปรแกรมที่ดีที่สุดเพื่อนักปรับแต่งโลกอนาคต!

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