รู้จักการจัดการข้อมูล JSON และการใช้งาน

รูปแบบข้อมูล JSON เป็นมาตรฐานในการแลกเปลี่ยนข้อมูลระหว่างเซิฟเวอร์และไคลเอนต์ที่ได้รับความนิยมในปัจจุบันซึ่งได้ถูกนำไปใช้งานอย่างแพร่หลายเช่นการเขียนโปรแกรมโดยใช้เทคนิค AJAX, RESTFul, เขียนคอนฟิกไฟล์ หรือการพัฒนา API เป็นต้น

ด้วยคุณสมบัติของ JSON ที่เป็นไฟล์ประเภทข้อความ (Text based) ขนาดเล็กน้ำหนักเบา เป็นมาตรฐานกลางทุกภาษาสามารถใช้งานได้ง่ายทั้งการอ่านและเขียนที่มนุษย์สามารถอ่านเข้าใจได้ง่าย

อักขระมาตารฐานของ JSON

1. เครื่องหมาย “:” ใช้สำหรับแยกค่า name และ value
2. เครื่องหมาย “,” ใช้สำหรับแยกข้อมุล name-value ในแต่ละคู่
3. เครื่องหมาย “{” และ “}” ระบุว่าข้อมูลเป็นออบเจ็ค
4. เครื่องหมาย “[” และ “]” ระบุว่าข้อมูลเป็นอาเรย์
5. เครื่องหมาย “” (double quotes) ใช้เขียนค่า name-value ใน JSON

ตัวอย่างการเขียนค่า Json

– จำนวน 1 คู่

"name" : "value"

– หากมีมากกว่า 1 คู่ ให้ใช้เครื่องหมายคอมมา , (comma) ในการแยกเป็นคู่

"name" : "value", "name" : "value", "name": "value"

– ต้วอย่าง JSON object

{
  "name" : "mama papa",
  "email" : "mama@email.com",
};

ชนิดข้อมูลของ JSON มี 6 ชนิด คือ

1. strings
2. numbers
3. objects
4. arrays
5. booleans
6. null or empty

– ตัวอย่างการใช้งานชนิดข้อมูล

{
   "text" : "This is Sting",
   "number" : 210,
   "object" :  {
                    "name" : "abc",
                    "popularity" : "immense"
                },
   "arary" : ["1","2","3"], 
   "empty" : ,  	
   "booleans" : true
}

การใช้งาน JSON ร่วมกับภาษา JavaScript

– ตัวอย่างการแสดงค่า JSON objects

var user = {
   "name" : "mama papa",
   "email" : "mama@email.com",
};

console.log("The name is:  " +user.name);
console.log("email is:  " +user.email);

//output
 The name is: mama papa
 email is: mama@email.com

– ตัวอย่างการแสดงค่า JSON objects ใน array

var students = [{
   "name" : "สมชาย",
   "age" :  "29",
   "gender" : "ผู้ชาย"
},
{
   "name" : "สมหญิง",
   "age" : "27",
   "gender" : "ผู้หญิง"
}];

console.log(students[0].age);  //output: 29
console.log(students[1].name); //output: สมหญิง

– ตัวอย่างการแสดงค่า JSON objects ใน objects

var cars = {
  "toyota" : {
     "type" : "vios",
     "year" :  "2018"
  },
  "honda" : {
     "type" : "city",
     "year" : "2015"
  }
}

console.log(cars.toyota.type); //output: vios
console.log(cars.honda.year); //output: 2015

ทริปเล็กๆน้อยๆ

ในการใช้งาน JSON ในภาษา JavaScript มีฟังก์ชั่นที่เราใช้งานบ่อยๆ อยู่ 2 ฟังก์ชัน คือ

1. JSON parser สำหรับแปลง JSON object เป็น javascript object ตัวอย่างเช่น

var myJSObject = JSON.parse(students);

 2. JSON stringify สำหรับแปลง JavaScript object เป็น JSON text

var jsonText= JSON.stringify(myJSObject);

(*ข้อควรระวังอย่าสับสนระหว่าง JSON object กับ  javascript object เพราะมันเป็นคนละอย่างกันนะครับ ^[3])

ทริปเพิ่มเติมสำหรับการใช้งานร่วมกับภาษา PHP จะมีฟังก์ชั่น json_encode เพื่อส่งข้อมูล json ไปให้ฝั่ง javascript ไปใช้งานต่ออีกที หากเราต้องการที่จะแปลงข้อมูลให้เป็น javascript object เพื่อจะให้เรานำข้อมูล json ไปทำงานต่อไปได้ง่ายขึ้นสามารถทำดังนี้

var jsonText= JSON.stringify(myJsonFormPHP);
var myJSObject = JSON.parse(jsonText);

Reference:

https://beginnersbook.com/2015/04/json-tutorial/

https://restfulapi.net/json-data-types/

Javascript Object VS JSON(JavaScript Object Notation) มันคนละเรื่องกัน ? ^[3]