Taninut.com
หน้าหลัก
สร้างสินค้า
Home
- กลุ่มสินค้า
(Product class)
- สินค้าสร้างใหม่
(Product create)
คูปอง
- สร้างคูปอง
(Coupons create)
- การใช้คูปอง
(Coupons use)
คำสั่งซื้อ(Orders)
- Orders
- Orders booking
เพิ่มเติม
- Content
- Article
- FAQs
แดชบอร์ดรวม
ประวัติการจอง
การตั้งค่า
ออกจากระบบ
Update Article: 106
Category ID
เลือกหมวดหมู่
IT
PHP
Flutter
Wordpress
SEO
Lifestyle
Travel
Breakfast
Hobby
Process
Mini Course
Website
หนังสือ
เทคโนโลยี (Technology)
ไลฟ์สไตล์ (Lifestyle)
การพัฒนาเว็บ (Web Development)
อาหารและการท่องเที่ยว (Food & Travel)
หนังสือและการเรียนรู้ (Books & Learning)
เคล็ดลับและทริคพิเศษ (Tips & Tricks)
โปรโมชั่น / ข่าวสาร
Content Name
Clear URLs
URL Off page
Content Desc
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 => response.json())<br> .then(data => 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 => response.json())<br> .then(data => {<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 Short
Content Img Alt
Content Tag
อัพโหลดรูปภาพ
สำหรับ SEO
Meta Title
Meta Desc
Meta Keyword
Og Title
Og Desc
สถานะเปิดใช้งานบทความ
Save
Back home