JSON มีจุดประสงค์ในการส่งข้อมูลกันระหว่างอุปกรณ์ เช่น การส่งข้อมูลกันระหว่าง server กับ browser
จะมีลักษณะข้อมูลเป็นชุดๆ และสามารถนำข้อมูลชุดนั้นๆ ไปใช้กับภาษาอื่นๆได้
โครงสร้างของ JSON มี 2 แบบ
แบบที่ 1 JSON แบบ Object สังเกตุง่ายๆ ชุดข้อมูลจะอยู่ในเครื่องหมายปีกกา { } โดยชุดข้อมูล จะแบ่งเป็น key กับ value และจะใช้เครื่องหมายจุลภาค , คั่นระหว่างชุดข้อมูล ตัวอย่างด้านล่างนี้ครับ
{
"Keyที่ 1" : "Value" ,
"Keyที่ 2" : "Value" ,
"Keyที่ 3" : "Value" ( ข้อมูลชุดสุดท้ายจะไม่มีเครื่องหมาย , )
}แบบที่ 2 JSON แบบ Array จุดสังเกตุ ชุดข้อมูลจะอยู่ในเครื่องหมายวงเล็บที่เป็นเหลี่ยมๆ [ ] ตามสไตล์รูปแบบ Array นั่นแหละ แล้วก็คั่นข้อมูลระหว่างชุดด้วยเครื่องหมาย ,
[
"Keyที่ 1" : "Value" ,
"Keyที่ 2" : "Value" ,
"Keyที่ 3" : "Value" ( ข้อมูลชุดสุดท้ายจะไม่มีเครื่องหมาย , )
] หรือจะผสมผสานกันไปก็ได้ แบบดัานล่างนี้ เนื่องจากข้อมูลชุดที่ 3 มีค่าชุดข้อมูลที่มากกว่า 1 ค่า ยกตัวอย่างเช่น Keyที่ 3 อาจจะเป็นเบอร์โทรศัพท์ ซึ่งคนนี้มีเบอร์โทรศัพท์ที่มากกว่า 1 เบอร์ก็ได้ครับ
{
"Keyที่ 1" : "Value" ,
"Keyที่ 2" : "Value" ,
"Keyที่ 3" : [
"Value ที่ 1",
"Value ที่ 2
]
} แล้วข้อมูลแบบ JSON นี้จะนำไปใช้งานยังไงหละ !
เราก็ต้องแปลงชุดข้อมูลนี้ให้เป็น Object ก่อน โดยใช้ JSON.parse( ) หรือ eval( ) นั่นเอง
ตัวอย่าง การแปลงรายชื่อ ที่อยู่ในชุดข้อมูลของ JSON เพื่อนำไปใช้งาน
<script type = "text/javaScript">
window.onload = function( ) {
var myListName = '{ "name" : "chumpol" , "tel" : "0805943439"}';
//แปลงเป็น object
var objFamily = JSON.parse(myListName);
//แล้วเรียกใช้งานตามนี้
alert("ชื่อน้องชาย" + objFamily.name) + "เบอร์โทรศัพท์" + objFamily.tel;
</script>อธิบายโค้ดด้านบน คือ การนำเอาข้อมูล JSON ที่เป็นรูปแบบตัวอักษร หรือว่า String ไปเก็บใว้ในตัวแปรทางซ้าย จะต้องใช้เครื่องหมาย single quote ( ‘ ) ครอบใว้นะครับ
จากตัวอย่างด้านบน ทุกท่านก็จะเห็นวิธีการแปลงจากชุดข้อมูล JSON เป็น Object และการนำไปใช้งานอย่างถูกต้องได้แล้วนะครับ
คอร์สเรียน HTML CSS JAVASCRIPT ที่แนะนำ
ความเห็นล่าสุด