JSON

json

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 ที่แนะนำ

คอร์สเรียน PHP JAVASCRIPT MYSQL ที่แนะนำ

อ่านบทความเพิ่มเติม

กดติดตามเพจ Facebook

ใส่ความเห็น