ปกติแล้วเวลาเราสร้างโปรแกรมหรือเว็บไซต์ขึ้นมาแล้วต้องการเก็บข้อมูล รับ/ส่งข้อมูล ติดต่อกันระหว่างโปรแกรมหรือระบบต่างๆ เราก็ต้องรู้ว่าฝั่งของเราและฝั่งที่เราต้องการติดต่อจะคุยกันยังไง เหมือนเวลาที่เราไปคุยกับคนอื่น ถ้าทั้งสองฝั่งใช้ภาษาไม่เหมือนกันก็จะคุยกันไม่รู้เรื่องหรือเกิดความผิดพลาดในการสื่อสารได้ ดังนั้นในการเขียนโปรแกรมก็ต้องมีภาษาหรือรูปแบบการสื่อสารที่จะทำให้แต่ละโปรแกรมหรือเว็บไซต์สามารถติดต่อกันได้อย่างถูกต้อง โดยในตอนแรกนั้นการติดต่อสื่อสารกันส่วนใหญ่จะใช้การคุยกันผ่านรูปแบบ XML ซึ่งมีโครงสร้างของข้อมูลที่ต้องเก็บค่อนข้างมาก ทำให้ก้อนข้อมูลมีขนาดใหญ่ และและนำไปใช้งานได้ยาก เมื่อมี JSON เกิดขึ้นมา JSON จึงเป็นที่นิยมและถูกนำไปใช้แทน XML อย่างรวดเร็ว
JSON เป็นข้อมูลรูปแบบ text ที่มีรูปแบบที่จะเก็บข้อมูลแบบ key, value โดยการเขียนข้อมูลชนิด JSON มีรูปแบบคือ ชื่อฟิลด์ครอบด้วยเครื่องหมาย “ (double quote), เครื่องหมาย : (colon), value แล้วครอบทั้งหมดด้วยเครื่องหมายปีกกา ตัวอย่างที่มีข้อมูล 1 อย่างจะเป็นดังนี้
'{"key": "value"}'
ประเภทข้อมูลที่ JSON เก็บได้มีดังนี้
การเก็บข้อมูลประเภท JSON object ให้วางซ้อนเข้าไปอีกทีได้เช่น
'{"name": "Kate", "pet": {"dog": "Corgi", "cat": "Persian"}}'
หรือจะเก็บข้อมูล array ก็สามารถทำได้แบบนี้
'{"name": "Jothanan", "age": 28, "car": ["Tsubaru", "Honda"]}'
ทั้ง JSON และ XML นั้นสามารถใช้เก็บหรือรับส่งข้อมูลโดยที่ภาษาโปรแกรมส่วนใหญ่สามารถนำไปใช้งานได้ และมนุษย์ก็สามารถอ่านเข้าใจได้เหมือนๆกัน แล้วอะไรคือความแตกต่างกันของ JSON และ XML ที่ทำให้ JSON ได้รับความนิยมเพิ่มขึ้นมากกว่า XML กันล่ะ?
มาถึงขั้นนี้ เราจะมาลองใช้งาน JSON ผ่านภาษา JavaScript กัน อย่างที่เคยอธิบายแล้วว่า JSON นั้นจะอยู่ในรูปแบบของ text ดังนั้นเราจึงต้องแปลงประเภทของข้อมูลก่อน โดย JavaScript มีคำสั่งสำหรับแปลง JSON โดยเฉพาะก็คือ JSON.parse() โดยเมื่อแปลงแล้วจากข้อมูล JSON จะเปลี่ยนเป็นข้อมูลประเภท JavaScript object ที่มีหน้าตาแทบจะคล้ายกันแทน
var myJSON = '{"name": "Kate", "pet": {"dog": "Corgi", "cat": "Persian"}}'; var myObj = JSON.parse(myJSON);
ตอนนี้ข้อมูลในตัวแปร myObj ของเราจะมีหน้าตาแบบนี้
{name: "Kate", pet: {dog: "Corgi", cat: "Persian"}}
เมื่อเราต้องการเรียก value ของ name จะสามารถทำได้โดยคำสั่ง
var customerName = myObj.name;
การเรียกข้อมูลสามารถทำได้อีกวิธีคือ
var customerName = myObj["name"];
โดยที่ 2 วิธีข้างต้นจะให้ผลเหมือนกันคือcustomerName เก็บค่าที่ return ซึ่งคือคำว่า “Kate”
และการเรียกค่าของตัวแปรภายใน object ก็สามารถทำได้โดย
var dog = myObj.pet.dog;
หรือ
var dog = myObj["pet"]["dog"];
หรือใครจะเล่นท่ายากใช้ผสมกันเลยก็ทำได้(แต่ไม่แนะนำเท่าไหร่)
var dog = myObj.pet["dog"];
(ทั้ง 3 วิธีให้ผลเหมือนกันคือตัวแปร dog เก็บค่า “Corgi”)
ถ้าเราต้องการเพิ่มข้อมูลเพิ่มเติมให้ key ใหม่ชื่อ status และ value เป็น “single”ทำได้ด้วยคำสั่ง
myObj.status = "single";
ตอนนี้ตัวแปร myObj จะมีข้อมูลแบบนี้
{name: "Kate", pet: {dog: "Corgi", cat: "Persian"}, status: "single"}
ใช้คำสั่ง Delete ตามด้วย key ที่ต้องการลบดังนี้
delete myObj.name
ข้อมูลของเราก็จะมีหน้าตาแบบนี้
{pet: {dog: "Corgi", cat: "Persian"}, status: "single"}
เมื่อเราจัดการข้อมูล JSON object จนพอใจแล้วต้องการเปลี่ยนกลับเป็น JSON เพื่อนำไปใช้งานก็สามารถใช้คำสั่งต่อไปนี้ได้เลย
JSON.stringify(myObj);
JSON นั้นมีชื่อเต็มๆว่า JavaScript Object Notation โดยในเว็บไซต์ของ JSON(https://www.json.org/json-en.html) บอกเอาไว้ว่าเป็น “lightweight data-interchange format” คือเป็นรูปแบบในการแลกเปลี่ยนข้อมูลที่มีน้ำหนักเบาหรือก็คือมีขนาดเล็กนั่นเอง และด้วยคุณสมบัติของมันทำให้ง่ายในการที่คอมพิวเตอร์จะสร้างและอ่านข้อมูล แม้กระทั่งมนุษย์อย่างเราๆก็สามารถอ่านทำความเข้าใจได้ง่ายเช่นกัน JSON เป็นรูปแบบข้อมูลที่เป็น text ทำให้นำไปใช้งานได้กับแทบทุกภาษาโปรแกรม
จากข้อดีของ JSON นี้ ทำให้เราสามารถนำไปใช้งานได้หลากหลายรูปแบบ ยกตัวอย่างเช่น การติดต่อกันผ่าน API ถ้าเราสร้างเว็บหรือแอพพลิเคชันที่จะต้องมีการติดต่อเพื่อดึงข้อมูลผ่าน API เราก็มักจะได้ response กลับมาในรูปแบบ JSON หรืออย่าง Twitter ก็มีการใช้ JSON ในการสร้างข้อมูลของทวีต อย่างทวีตด้านล่างนี้
ถูกสร้างมาจาก JSON ดังนี้
{ "created_at": "Thu Apr 06 15:24:15 +0000 2017", "id_str": "850006245121695744", "text": "1\/ Today we\u2019re sharing our vision for the future of the Twitter API platform!\nhttps:\/\/t.co\/XweGngmxlP", "user": { "id": 2244994945, "name": "Twitter Dev", "screen_name": "TwitterDev", "location": "Internet", "url": "https:\/\/dev.twitter.com\/", "description": "Your official source for Twitter Platform news, updates & events. Need technical help? Visit https:\/\/twittercommunity.com\/ \u2328\ufe0f #TapIntoTwitter" }, "place": { }, "entities": { "hashtags": [ ], "urls": [ { "url": "https:\/\/t.co\/XweGngmxlP", "unwound": { "url": "https:\/\/cards.twitter.com\/cards\/18ce53wgo4h\/3xo1c", "title": "Building the Future of the Twitter API Platform" } } ], "user_mentions": [ ] } }
ตัวอย่างทวีตจาก https://developer.twitter.com/en/docs/tweets/data-dictionary/overview/intro-to-tweet-json