JSON ย่อมาจาก JavaScript Object Notation ซึ่งเป็นรูปแบบของข้อมูลที่ใช้สำหรับการส่งข้อมูลระหว่างเว็บแอปพลิเคชันและเว็บเซิร์ฟเวอร์ โดยมีรูปแบบเป็น key-value pairs ซึ่งใช้ในการจัดเก็บและแลกเปลี่ยนข้อมูลระหว่างเว็บแอปพลิเคชัน

วัตถุประสงค์หลักของ JSON คือการสื่อสารระหว่างเว็บแอปพลิเคชันและเว็บเซิร์ฟเวอร์ในรูปแบบที่มีความสะดวกและมีประสิทธิภาพสูง โดย JSON สามารถถูกอ่านและสร้างขึ้นโดยภาษาโปรแกรมต่าง ๆ อย่างเช่น JavaScript, Python, PHP, Java เป็นต้น ดังนั้น JSON เป็นรูปแบบของข้อมูลที่สำคัญและนิยมใช้ในการส่งข้อมูลระหว่างเว็บแอปพลิเคชันและเว็บเซิร์ฟเวอร์ในปัจจุบันโดยทั่วไป

การจัดการข้อมูล JSON ประกอบด้วยการสร้าง JSON object หรือ JSON array และการแปลงข้อมูล JSON กลับเป็นข้อมูลประเภทอื่น ๆ เช่น ข้อมูล String, Number, Boolean หรือ Object เพื่อนำไปใช้งานต่อไปในโปรแกรมหรือแสดงผลบนเว็บไซต์

การสร้าง JSON object สามารถทำได้โดยใช้ปีกกา { } และระบุ key กับ value ของ object ด้วยเครื่องหมาย : ตามด้วยข้อมูลที่ต้องการเก็บ เช่น

let person = {  "name": "John",  "age": 30,  
                 "address": {
                            "street": "123 Main St",
                            "city": "New York",
                            "state": "NY"  
                           }
            };

การสร้าง JSON array สามารถทำได้โดยใช้เครื่องหมาย [ ] และระบุข้อมูลที่ต้องการเก็บใน array ตามลำดับ เช่น

let fruits = ["apple", "banana", "orange"];

การแปลงข้อมูล JSON กลับเป็นข้อมูลประเภทอื่น ๆ สามารถทำได้โดยใช้เมธอด parse() หรือ stringify() ของ JavaScript เช่น

let jsonStr = '{"name":"John","age":30,"city":"New York"}';

let obj = JSON.parse(jsonStr); // แปลง JSON string เป็น JavaScript object

let json = JSON.stringify(obj); // แปลง JavaScript object เป็น JSON string

การใช้งาน JSON สามารถนำมาใช้กับการส่งข้อมูลระหว่างเว็บไซต์และเว็บเซิร์ฟเวอร์ หรือใช้สำหรับการจัดเก็บข้อมูลในฐานข้อมูล หรือการแลกเปลี่ยนข้อมูลระหว่างโปรแกรมในรูปแบบของ RESTful API ได้ทั้งหมด

การดึงข้อมูล JSON มาแสดงผลสามารถทำได้โดยการส่ง request ไปยังเว็บเซิร์ฟเวอร์ที่มีข้อมูล JSON แล้วใช้ JavaScript หรือภาษาโปรแกรมอื่น ๆ เพื่อดึงข้อมูลและแสดงผล

ตัวอย่างการดึงข้อมูล JSON จาก API ด้วย JavaScript ดังนี้

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(data => console.log(data))

โค้ดด้านบนจะดึงข้อมูล JSON จาก API ของ jsonplaceholder โดยดึงข้อมูล todo ที่มี id เท่ากับ 1 จากนั้นแปลงข้อมูล JSON เป็น JavaScript object ด้วย response.json() และแสดงผลลัพธ์ใน console ด้วย console.log(data) โดยผลลัพธ์ที่แสดงออกมาจะเป็นข้อมูล JSON ดังนี้

{"userId": 1,  "id": 1,"title": "delectus aut autem","completed": false}

จากนั้นสามารถใช้ JavaScript เพื่อแสดงผลข้อมูล JSON ดังนี้

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(data => {
           const title = document.createElement('h1')
           title.textContent = data.title
           document.body.appendChild(title)
    })

โดยจะแสดงผล title ของ todo ที่มี id เท่ากับ 1 ในหน้าเว็บไซต์ ด้วยการสร้าง element ของ h1 และกำหนด text content ของ element ด้วย data.title และเพิ่ม element นี้เข้าไปยัง body ด้วย document.body.appendChild(title) ผลลัพธ์ที่แสดงออกมาจะเป็นข้อความ "delectus aut autem" ที่เป็น title ของ todo ที่มี id เท่ากับ 1

แนะนำ extension Chrome สำหรับจัดรูปแบบ JSON :

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc