Day: July 12, 2020

  • รู้จักการจัดการข้อมูล 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]