Update Article: 106

Category ID

Content Name

Clear URLs

URL Off page

Content Desc

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 ด้วยเครื่องหมาย : ตามด้วยข้อมูลที่ต้องการเก็บ เช่น
<pre><code>let person = { "name": "John", "age": 30, "address": { "street": "123 Main St", "city": "New York", "state": "NY" } };</code></pre>
การสร้าง JSON array สามารถทำได้โดยใช้เครื่องหมาย [ ] และระบุข้อมูลที่ต้องการเก็บใน array ตามลำดับ เช่น
<pre><code>let fruits = ["apple", "banana", "orange"];</code></pre>
การแปลงข้อมูล JSON กลับเป็นข้อมูลประเภทอื่น ๆ สามารถทำได้โดยใช้เมธอด parse() หรือ stringify() ของ JavaScript เช่น
<pre><code>let jsonStr = '{"name":"John","age":30,"city":"New York"}';</code></pre>
<pre><code>let obj = JSON.parse(jsonStr); // แปลง JSON string เป็น JavaScript object</code></pre>
<pre><code>let json = JSON.stringify(obj); // แปลง JavaScript object เป็น JSON string</code></pre>
การใช้งาน JSON สามารถนำมาใช้กับการส่งข้อมูลระหว่างเว็บไซต์และเว็บเซิร์ฟเวอร์ หรือใช้สำหรับการจัดเก็บข้อมูลในฐานข้อมูล หรือการแลกเปลี่ยนข้อมูลระหว่างโปรแกรมในรูปแบบของ RESTful API ได้ทั้งหมด 
การดึงข้อมูล JSON มาแสดงผลสามารถทำได้โดยการส่ง request ไปยังเว็บเซิร์ฟเวอร์ที่มีข้อมูล JSON แล้วใช้ JavaScript หรือภาษาโปรแกรมอื่น ๆ เพื่อดึงข้อมูลและแสดงผล
ตัวอย่างการดึงข้อมูล JSON จาก API ด้วย JavaScript ดังนี้
<pre><code>fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response =&gt; response.json()) .then(data =&gt; console.log(data))</code></pre>
โค้ดด้านบนจะดึงข้อมูล JSON จาก API ของ jsonplaceholder โดยดึงข้อมูล todo ที่มี id เท่ากับ 1 จากนั้นแปลงข้อมูล JSON เป็น JavaScript object ด้วย <code>response.json()</code> และแสดงผลลัพธ์ใน console ด้วย <code>console.log(data)</code> โดยผลลัพธ์ที่แสดงออกมาจะเป็นข้อมูล JSON ดังนี้
<pre><code>{"userId": 1, "id": 1,"title": "delectus aut autem","completed": false}</code></pre>
จากนั้นสามารถใช้ JavaScript เพื่อแสดงผลข้อมูล JSON ดังนี้
<pre><code>fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response =&gt; response.json()) .then(data =&gt; { const title = document.createElement('h1') title.textContent = data.title document.body.appendChild(title) })</code></pre>
โดยจะแสดงผล title ของ todo ที่มี id เท่ากับ 1 ในหน้าเว็บไซต์ ด้วยการสร้าง element ของ h1 และกำหนด text content ของ element ด้วย <code>data.title</code> และเพิ่ม element นี้เข้าไปยัง body ด้วย <code>document.body.appendChild(title)</code> ผลลัพธ์ที่แสดงออกมาจะเป็นข้อความ "delectus aut autem" ที่เป็น title ของ todo ที่มี id เท่ากับ 1 
แนะนำ extension Chrome สำหรับจัดรูปแบบ JSON :
<a href="https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc">https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc</a>

Content Short

Content Img Alt

Content Tag

อัพโหลดรูปภาพ

สำหรับ SEO

Meta Title

Meta Desc

Meta Keyword

Og Title

Og Desc

สถานะเปิดใช้งานบทความ

Back home