JSON แบบสอนเพื่อน 101

JSON คือ …

• JavaScript Object Notation (JSON) หรือแปลไทยได้ว่า “ชุดข้อมูลของจาวาสคริปต์” (แต่มีหลายภาษาที่อ่าน JSON ออกนะ)
• โดยที่ JSON นั้นเป็นรูปแบบของข้อความในลักษณะของข้อมูลที่ใช้แลกเปลี่ยนระหว่าง module ที่มีขนาดเล็กสามารถอ่านเข้าใจได้ง่ายโดยมนุษย์ อีกทั้งคอมฯยังแปลงค่า และสร้างรูปแบบข้อมูลนี้ได้รวดเร็วอีกด้วย

โครงสร้างของ JSON …

• โดยทั่วไปแล้ว JSON นั้นจะถูกจัดเก็บหรือเรียบเรียงในรูปแบบของชุดข้อมูล(collection) ที่คล้ายๆกับ array ของ object ที่จะอยู่ภายใต้ {…} และมีชื่อชุดข้อมูล(name/key) กำกับอยู่กับข้อมูล(value)

ดังนี้ ..

{
    "key"  : "value1",
    "name" : "value2"
}

โดยที่ ..

• “name/key” นั้นคือชื่อที่จะใช้ในการอ้างอิงถึง value สามารถเป็นตัวแปรชนิด string ภาษาใดก็ได้แต่แนะนำ(อย่างแรง) ให้ใช้ภาษาอังกฤษและ/หรือตัวเลขอารบิกเท่านั้น และจำเป็นต้องอยู่ภายใต้ “…” อีกด้วย (ไม่อยู่ก็ได้แต่ในบางภาษาจะมองว่าผิด syntax)
• “value” นั้นคือข้อมูลต่างๆต้องการเก็บลงใน collection สามารถเป็นตัวแปรชนิด string, number, object, array, boolean, null เท่านั้น

ตัวอย่าง ..

{
    {
        "string" : "สตริง",
        "number" : 753,
        "object" : {
                       "BASIC" : "สวัสดีโลกใบนี้",
                       "list" : ["asdf", "jkl;", "qwerty"]
                   },
        "array" : [0, 1, 2, 3, 4, 5],
        "bollean" : true,
        "null" : null
    }
}

การนำไปใช้ …

ข้ออ้างอิงด้วยภาษา JavaScript(js)

• ที่พบเห็นได้ทั่วไปนั้น JSON จะถูกส่งมาในรูปแบบของ api คือจะทำการส่ง request ไปแล้ว server จะส่งค่ากลับมาในรูปแบบของ JSON ให้..หากเป็นในยุคสมัยที่ผ่านมา api ส่วนใหญ่มักจะ return กลับให้ในรูปแบบของ xml
• แต่ JSON ก็สามารถใช้ในรูปแบบของการส่งค่าภายใน module นั้นๆได้เหมือนกัน

วิธีเรียก collection ต่างๆภายใน JSON มาแสดง

• ด้วยความที่ JSON นั้นตัวมันเป็นก็คือ object เหมือนกันจึงสามารถใช้การ . (จุด/dot) ต่อท้าย ก้อน object หลักได้เลย จากนั้นหากต้องการ collection ก็ให้ dot ชื่อ name/key ตามได้เลยก็จะได้ค่าที่ collection นั้นเก็บอยู่เอาไว้ทันที ชนิดตัวแปรที่ได้รับก็จะเป็นไปตามที่ collection นั้นๆเก็บอยู่หากเป็น collection ที่เก็บ object เอาไว้ ก็สามารถที่จะ dot ต่อไปได้เลยอีกเช่นกัน

ตัวอย่าง ..

const getJSON = (name) =>
{
    let preJSON = `{
    "greeting" : "Hello, ${name}.",
    "toDo" : "${name} คุณต้องเรียนรู้ให้มากขึ้นกว่านี้นะ !"
}`;
    return JSON.parse(preJSON); // JSON.parse() คือคำสั่งแปลง string 
                                   ให้เป็น JSON object
}
const getJSONString = (JSONObject) => JSON.stringify(JSONObject); 
                      // JSON.stringify คือแปลง json object 
                         ให้เป็น json ที่อยู๋ในรูปแบบของ string
let JSONData;
let myName = "SaiFah";
JSONData = getJSON(myName);

console.log(JSONData.greeting); // <= จะได้ "Hello, SaiFah."
console.log(`วันนี้ ${JSONData.toDo}`); // <= จะได้ "วันนี้ SaiFah 
                                           คุณต้องเรียนรู้ให้มากขึ้นกว่านี้นะ !"

ที่มา https://www.json.org/ และ จากการทดลองใช้ในงานประจำวัน