JSON คืออะไร?
JSON ย่อมาจากJ ava S cript O bject N otation
JSON เป็นรูปแบบน้ำหนักเบาสำหรับจัดเก็บและขนส่งข้อมูล
มักใช้ JSON เมื่อข้อมูลจากเซิร์ฟเวอร์ไปยังหน้าเว็บ
JSON คือ "อธิบายตนเอง" และเข้าใจง่าย
ตัวอย่าง JSON
ตัวอย่างนี้กำหนดอ็อบเจ็กต์พนักงาน: อาร์เรย์ของเรคคอร์ดพนักงาน 3 รายการ (อ็อบเจ็กต์):
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}
กฎไวยากรณ์ JSON
- ข้อมูลอยู่ในคู่ชื่อ/ค่า
- ข้อมูลคั่นด้วยเครื่องหมายจุลภาค
- เครื่องมือจัดฟันแบบหยิกถือวัตถุ
- วงเล็บเหลี่ยมถืออาร์เรย์
สัญกรณ์วัตถุ JavaScript
รูปแบบ JSON จะเหมือนกับโค้ดสำหรับสร้างออบเจกต์ JavaScript
เนื่องจากความคล้ายคลึงกันนี้ โปรแกรม JavaScript สามารถแปลงข้อมูล JSON เป็นวัตถุ JavaScript ดั้งเดิมได้อย่างง่ายดาย
ไวยากรณ์ JSON ได้มาจากไวยากรณ์สัญกรณ์วัตถุ JavaScript แต่รูปแบบ JSON เป็นข้อความเท่านั้น รหัสสำหรับอ่านและสร้างข้อมูล JSON สามารถเขียนในภาษาโปรแกรมใดก็ได้
ข้อมูล JSON - ชื่อและค่า
ข้อมูล JSON ถูกเขียนเป็นคู่ของชื่อ/ค่า เช่นเดียวกับคุณสมบัติของวัตถุ JavaScript
คู่ชื่อ/ค่าประกอบด้วยชื่อฟิลด์ (ในเครื่องหมายคำพูดคู่) ตามด้วยเครื่องหมายทวิภาค ตามด้วยค่า:
"firstName":"John"
ชื่อ JSON ต้องมีเครื่องหมายคำพูดคู่ ชื่อ JavaScript ไม่
วัตถุ JSON
ออบเจ็กต์ JSON ถูกเขียนในวงเล็บปีกกา
เช่นเดียวกับใน JavaScript วัตถุสามารถมีคู่ชื่อ/ค่าได้หลายคู่:
{"firstName":"John", "lastName":"Doe"}
อาร์เรย์ JSON
อาร์เรย์ JSON ถูกเขียนในวงเล็บเหลี่ยม
เช่นเดียวกับใน JavaScript อาร์เรย์สามารถมีวัตถุได้:
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
ในตัวอย่างข้างต้น วัตถุ "พนักงาน" คืออาร์เรย์ ประกอบด้วยวัตถุสามอย่าง
แต่ละวัตถุเป็นบันทึกของบุคคล (ที่มีชื่อและนามสกุล)
การแปลงข้อความ JSON เป็นวัตถุ JavaScript
การใช้งานทั่วไปของ JSON คือการอ่านข้อมูลจากเว็บเซิร์ฟเวอร์ และแสดงข้อมูลในหน้าเว็บ
เพื่อความง่าย สามารถแสดงให้เห็นได้โดยใช้สตริงเป็นอินพุต
ขั้นแรก สร้างสตริง JavaScript ที่มีไวยากรณ์ JSON:
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
จากนั้น ใช้ฟังก์ชัน JSON.parse() ในตัว JavaScript เพื่อแปลงสตริงเป็นออบเจกต์ JavaScript:
var obj = JSON.parse(text);
สุดท้าย ใช้วัตถุ JavaScript ใหม่ในหน้าของคุณ:
ตัวอย่าง
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
บทช่วยสอน JSON แบบเต็ม
นี่เป็นคำอธิบายสั้นๆ ของ JSON
สำหรับบท ช่วยสอน JSON แบบเต็ม ให้ไปที่W3Schools JSON Tutorial