Web Data Type ตอนที่ #2/2 JSON คือ?

JSON ย่อมาจาก Java Script Object Notation เป็นรูปแบบมาตรฐานในการจัดเก็บข้อมูลในลักษณะที่มนุษย์อ่านได้ง่าย (human-readable) ซึ่งได้รับความนิยมใช้ในการรับส่งข้อมูลผ่านเว็บและเว็บเซอร์วิส พร้อมกับการใช้งานเทคโนโลยี AJAX เป็นอย่างมากเนื่องจากความง่ายและความยืดหยุ่นในการนำมาใช้งาน

** ท่านที่สนใจแบบละเอียดแนะนำให้เข้าไปดูใน w3school.com ตาม Link นี้ครับ

ถ้าใครอ่านแล้วไม่เข้าใจแสดงว่าน่าจะยังไม่ค่อยคุ้นกับ Java Script และ XML ให้ลองกลับไปดูในตอนอื่นๆ ที่ผมเคยเขียนไว้นะครับ

 

รูปแบบของ JSON

// JSON Object ทั่วไป
{"property1":"value1"}

// JSON Object มีค่า value เป็นอาเรย์
{"property1": [ "value1", "value2", "value3"]}

// JSON Object มี property มากกว่า 1 ตัว
{"propertyA":"valueA", "propertyB":"valueB"}

// อาเรย์ของ JSON Object 
[{"propertyA":"valueA1", "propertyB":"valueB1"},
 {"propertyA":"valueA2", "propertyB":"valueB2"},
 {"propertyA":"valueA3", "propertyB":"valueB3"}]

 

รูปแบบของ JSON นั้นไม่มีความแน่นอนขึ้นอยู่กับความต้องการของผู้ออกแบบว่าต้องการข้อมูลอะไรบ้าง และด้วยที่ Java Script เป็นภาษาที่ยืดหยุ่นในเรื่องของชนิดข้อมูลทำให้การประกาศข้อมูลแบบ JSON มีความหลากหลายแต่ถ้าจับหลักได้ก็ไม่ยากครับ

var emps={"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

console.log(emps);
console.log(emps.employees);
console.log(emps.employees[0]);
console.log(emps.employees[0].firstName);

จากตัวอย่างเป็น JSON Object ที่มี attribute 1 ตัวชื่อ employees ซึ่งเก็บอาเรย์ของ Object รายชื่ออีก 3 ตัวที่ภายในเก็บ firstName และ lastName การเข้าถึงข้อมูลใน JSON Object จะใช้ . และ [] ขึ้นอยู่กับชนิดของข้อมูล ตัวอย่างเช่นหากต้องการเข้าถึง คำว่า Smith ในตัวอย่างสามารถเรียกผ่าน emps.employees[1].lastName เป็นต้น เมื่อเปรียบเทียบกับการเก็บแบบ XML จะได้แบบนี้

<employees>
   <employee>
     <firstName>John</firstName> <lastName>Doe</lastName>
   </employee>
   <employee>
     <firstName>Anna</firstName> <lastName>Smith</lastName>
   </employee>
   <employee>
     <firstName>Peter</firstName> <lastName>Jones</lastName>
   </employee>
</employees>

 

เราสามารถออกแบบรูปแบบข้อมูลตามแบบที่เราต้องการได้ ตัวอย่างเช่นต้อการส่งข้อมูลนักเรียน 1 คน ซึ่งประกอบด้วย ชื่อ รหัสนักศึกษา เบอร์โทร(มีได้หลายเบอร์) อีเมล์ เกรดเฉลี่ย เกรดของแต่ละวิชา สามารถเขียนได้ดังนี้

var std = {"name":"Stdent 1",
           "id": 1001,
           "phone":["081929283","093212345"],
           "email":"std1@gmail.com",
           "gpa": 3.80,
           "totalgrade": [{"subject":"Web Design","grade":"A"},
                       {"subject":"Algorithm","grade":"B+"},
                       {"subject":"Physic","grade":"B"}]
         }
หากต้องการดึงข้อมูลของ std สามารถทำได้ดังนี้

document.writeln(std.name);
document.writeln(std.id);
document.writeln(std.phone[0] + ", " std.phone[1]);
document.writeln(std.email);
document.writeln(std.gpa);
for(var i=0;i<std.totalgrade.length;i++){
  document.writeln(std.grade[i].subject + " : " + std.grade[i].grade);
}

 

เราสามารถสร้าง JSON จากอะไรได้บ้าง

  • สร้างเอง หรือ ใช้ JSON Editor
  • ใช้ MS Excel เขียนสูตรในการสร้าง หรือใช้โปรแกรม CSV to JSON ในการแปลง
  • แปลงจาก Java Object เป็น JSON Object โดยใช้ GSON API ของ Google โดยสามารถดาวน์โหลดได้จาก GitHub
  • สร้าง RESTful Web Service ที่ response เป็น application/json (ไว้มีเวลาจะทำวิธีการภาษาไทยให้นะครับ)

 

ตัวอย่างการใช้งาน GSON ในการแปลง Object BagOfPrimitives เป็น JSON

class BagOfPrimitives {
  private int value1 = 1;
  private String value2 = "abc";
  private transient int value3 = 3;
  BagOfPrimitives() {
    // no-args constructor
  }
}

การแปลง Java Object เป็น JSON Object ด้วย GSON
BagOfPrimitives obj = new BagOfPrimitives();
Gson gson = new Gson();
String json = gson.toJson(obj);  
==> json is {"value1":1,"value2":"abc"}

นอกจากนั้นเรายังสามารถพบเห็นการนำ JSON มาใช้งานในระบบที่เรารู้จักกันดีเช่น Google Maps, Twitter, Facebook, Flikr, Youtube เป็นตั้น ลองดูตัวอย่างใน Link ครับ

{"markers": [
		{
			"point":new GLatLng(40.266044,-74.718479), 
			"homeTeam":"Lawrence Library",
			"awayTeam":"LUGip",
			"markerImage":"images/red.png",
			"information": "Linux users group meets second Wednesday of each month.",
			"fixture":"Wednesday 7pm",
			"capacity":"",
			"previousScore":""
		},
		{
			"point":new GLatLng(40.211600,-74.695702),
			"homeTeam":"Hamilton Library",
			"awayTeam":"LUGip HW SIG",
			"markerImage":"images/white.png",
			"information": "Linux users can meet the first Tuesday of the month to work out harward and configuration issues.",
			"fixture":"Tuesday 7pm",
			"capacity":"",
			"tv":""
		},
		{
			"point":new GLatLng(40.294535,-74.682012),
			"homeTeam":"Applebees",
			"awayTeam":"After LUPip Mtg Spot",
			"markerImage":"images/newcastle.png",
			"information": "Some of us go there after the main LUGip meeting, drink brews, and talk.",
			"fixture":"Wednesday whenever",
			"capacity":"2 to 4 pints",
			"tv":""
		},
] }

ตัวอย่างการเก็บข้อมูลแบบ JSON ของ Google Map

 

จะเห็นว่าเราสมารถนำ JSON มาใช้ประโยชน์ในการเก็บข้อมูลได้เยอะมาก รวมไปถึงการใช้ร่วมกับการเขียนโปรแกรมในรูปแบบ AJAX และติดต่อแลกเปลียนข้อมูลผ่าน Web Service ใตตอนหน้าผมจะพูดถึงข้อดี ข้อเสียของทั้ง JSON และ XML และวิธีการเลือกใช้ให้เหมาะสมกับงาน โปรดติดตามตอนต่อไปครับ

AjBee.Me : ของทุกอย่าง หากสามารถเลือกใช้ให้เหมาะสมย่อมเกิดประโยชน์สูงสุด แชร์ได้ถ้าเห็นว่ามีประโยชน์ ^_^