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