logo icon
Taninut.com
image
image แดชบอร์ดรวม
image ประวัติการจอง
image การตั้งค่า
image ออกจากระบบ

106

Update
Delete
Back
 
 
 
Content ID106
Category ID1
Writer ID(not set)
User ID(not set)
Lang Modeth
Content Nameรู้จักการจัดการข้อมูล JSON และการใช้งาน
Content Urlรู้จักการจัดการข้อมูล-JSON-และการใช้งาน
Content Desc<p data-pm-slice="1 1 []"><strong>JSON ย่อมาจาก JavaScript Object Notation</strong> ซึ่งเป็นรูปแบบของข้อมูลที่ใช้สำหรับการส่งข้อมูลระหว่างเว็บแอปพลิเคชันและเว็บเซิร์ฟเวอร์ โดยมีรูปแบบเป็น key-value pairs ซึ่งใช้ในการจัดเก็บและแลกเปลี่ยนข้อมูลระหว่างเว็บแอปพลิเคชัน<br><br></p>
<p data-pm-slice="1 1 []"><strong>วัตถุประสงค์หลักของ JSON</strong> คือการสื่อสารระหว่างเว็บแอปพลิเคชันและเว็บเซิร์ฟเวอร์ในรูปแบบที่มีความสะดวกและมีประสิทธิภาพสูง โดย JSON สามารถถูกอ่านและสร้างขึ้นโดยภาษาโปรแกรมต่าง ๆ อย่างเช่น JavaScript, Python, PHP, Java เป็นต้น ดังนั้น JSON เป็นรูปแบบของข้อมูลที่สำคัญและนิยมใช้ในการส่งข้อมูลระหว่างเว็บแอปพลิเคชันและเว็บเซิร์ฟเวอร์ในปัจจุบันโดยทั่วไป<br><br></p>
<p data-pm-slice="1 1 []"><strong>การจัดการข้อมูล JSON</strong> ประกอบด้วยการสร้าง JSON object หรือ JSON array และการแปลงข้อมูล JSON กลับเป็นข้อมูลประเภทอื่น ๆ เช่น ข้อมูล String, Number, Boolean หรือ Object เพื่อนำไปใช้งานต่อไปในโปรแกรมหรือแสดงผลบนเว็บไซต์<br><br></p>
<p>การสร้าง JSON object สามารถทำได้โดยใช้ปีกกา { } และระบุ key กับ value ของ object ด้วยเครื่องหมาย : ตามด้วยข้อมูลที่ต้องการเก็บ เช่น</p>
<pre><code>let person = { "name": "John", "age": 30, <br> "address": {<br> "street": "123 Main St",<br> "city": "New York",<br> "state": "NY" <br> }<br> };</code></pre>
<p>การสร้าง JSON array สามารถทำได้โดยใช้เครื่องหมาย [ ] และระบุข้อมูลที่ต้องการเก็บใน array ตามลำดับ เช่น</p>
<pre><code>let fruits = ["apple", "banana", "orange"];</code></pre>
<p>การแปลงข้อมูล JSON กลับเป็นข้อมูลประเภทอื่น ๆ สามารถทำได้โดยใช้เมธอด parse() หรือ stringify() ของ JavaScript เช่น</p>
<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>
<p>การใช้งาน JSON สามารถนำมาใช้กับการส่งข้อมูลระหว่างเว็บไซต์และเว็บเซิร์ฟเวอร์ หรือใช้สำหรับการจัดเก็บข้อมูลในฐานข้อมูล หรือการแลกเปลี่ยนข้อมูลระหว่างโปรแกรมในรูปแบบของ RESTful API ได้ทั้งหมด<br><br></p>
<p><strong>การดึงข้อมูล JSON มาแสดงผล</strong>สามารถทำได้โดยการส่ง request ไปยังเว็บเซิร์ฟเวอร์ที่มีข้อมูล JSON แล้วใช้ JavaScript หรือภาษาโปรแกรมอื่น ๆ เพื่อดึงข้อมูลและแสดงผล</p>
<p>ตัวอย่างการดึงข้อมูล JSON จาก API ด้วย JavaScript ดังนี้</p>
<pre><code>fetch('https://jsonplaceholder.typicode.com/todos/1')<br> .then(response =&gt; response.json())<br> .then(data =&gt; console.log(data))</code></pre>
<p>โค้ดด้านบนจะดึงข้อมูล JSON จาก API ของ jsonplaceholder โดยดึงข้อมูล todo ที่มี id เท่ากับ 1 จากนั้นแปลงข้อมูล JSON เป็น JavaScript object ด้วย <code>response.json()</code> และแสดงผลลัพธ์ใน console ด้วย <code>console.log(data)</code> โดยผลลัพธ์ที่แสดงออกมาจะเป็นข้อมูล JSON ดังนี้</p>
<pre><code>{"userId": 1, "id": 1,"title": "delectus aut autem","completed": false}</code></pre>
<p>จากนั้นสามารถใช้ JavaScript เพื่อแสดงผลข้อมูล JSON ดังนี้</p>
<pre><code>fetch('https://jsonplaceholder.typicode.com/todos/1')<br> .then(response =&gt; response.json())<br> .then(data =&gt; {<br> const title = document.createElement('h1')<br> title.textContent = data.title<br> document.body.appendChild(title)<br> })</code></pre>
<p>โดยจะแสดงผล 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<br><br></p>
<p><strong>แนะนำ extension Chrome สำหรับจัดรูปแบบ JSON :</strong></p>
<p><a href="https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc">https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc</a></p>
Content Short
Content View4014
Content Thumb Highlight
Content Thumb/uploads/article/15kiNjVohS.png
Content Img Altรู้จักการจัดการข้อมูล JSON และการใช้งาน
Content Tagรู้จักการจัดการข้อมูล JSON , การใช้งาน JSON
Content Date(not set)
Active Status1
Sort99999
Meta Titleรู้จักการจัดการข้อมูล JSON และการใช้งาน
Meta Descรู้จักการจัดการข้อมูล JSON และการใช้งาน
Meta Keywordรู้จักการจัดการข้อมูล JSON และการใช้งาน
Og Titleรู้จักการจัดการข้อมูล JSON และการใช้งาน
Og Descรู้จักการจัดการข้อมูล JSON และการใช้งาน
Status1
Create Date Time2023-03-23 12:24:27
Update Date Time2023-03-23 14:32:31
Create By
Update By