JSON มันทำให้ชีวิตง่ายขึ้นเยอะเลย

 

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

JSON (JavaScript Object Notation) ชื่อก็บอกในตัวเลยว่ามันคือ javascript ที่อยู่ในรูปแบบของ object ซึ่งมันช่วยให้เราสามารถทำงานได้ง่ายขึ้นซึ่งข้อดีมีดังนี้

  1. ถูกออกแบบมาให้ง่ายสำหรับการแลกเปลี่ยนข้อมูล
  2. ลักษณะข้อมูลสามารถอ่านหรือแก้ไขได้ง่าย
  3. สามารถใช้ Javascript ช่วยในการเข้าถึงข้อมูลภายใน JSON ได้ง่าย
  4. มีภาษาหลาย ๆ ภาษาที่รองรับการใช้งาน JSON

JSON เป็นข้อมูลในรูปแบบของ Object เราจะเรียกว่า JSON Object เริ่มจากเครื่องหมายปีกกาเปิด { และสิ้นสุดที่ปีกกาปิด } ภายใน object จะมีข้อมูลที่เรียกว่า member วิธีการเขียน json มีดังนี้

{member}

รูปแบบของ member จะอยู่ในรูปแบบของการจับคู่ระหว่าง name/value เราเรียกว่า name/value paris วิธีการเขียน member มีดังนี้

{“name”:”value”}

หาก member มีมากกว่า 1 ชุดให้คั่นด้วยเครื่องหมาย , (comma) ดังนี้

{“name”:”value”,”name”:”value”,…..}

ตัวอย่างที่ 1

image

บรรทัดที่ 2 เป็นการประกาศ json จะพบว่ามีข้อมูลอยู่ 1 คู่ซึ่งคู่นี้มี name ชื่อว่า firstname และ value คือ moou

บรรทัดที่ 3 เป็นการทดสอบเรียกใช้งาน json ซึ่งที่น่าสนใจคือในตัวแปร json นั้นในขณะนี้เป็น object ด้วยคุณสมบัติที่ตัวแปร json เป็น object ทำให้สามารถเรียก property(ในที่นี้จะเป็นการจับคู่กับ name ) ที่อยู่ในตัวแปร json ตัวใดก็ได้ซึ่งในตัวอย่างมีแค่ตัวเดียวคือ firstname เราจึงสามารถอ้างอิงถึง property ที่อยู่ในตัวแปร json ได้เพียงตัวเดียวคือ firstname ผลลัพธ์จึงได้ออกมาเป็นคำว่า moou

ตัวอย่างที่ 2

image

บรรทัดที่ 2-6 เป็นการกำหนด json ให้มีข้อมูลทั้งหมด 3 คู่คือ firstname lastname และ major

บรรทัดที่ 7-10 เป็นการทดสอบเรียกใช้งาน json ที่น่าสนใจในบรรทัดนี้จากผลลัพธ์คือ ข้อมูลที่อยู่ภายในตัวแปร json ไม่มีการเรียงลำดับก่อนหลังซึ่งจะเอาข้อมูลไหนมาเรียกใช้งานก่อนก็ได้ จากรูปจะพบกว่ามีการประกาศ firstname lastname และ major ตามลำดับแต่การเรียกใช้งานไม่จำเป็นต้องเรียกใช้งาน firstname ก่อน จะเรียกลำดับไหนก่อนก็ได้

ตัวอย่างที่ 3

เมื่อมาถึงจุดนี้ผมคิดว่ามันก็ใช้งานง่ายนะเลยลองคิดเล่น ๆ ดูว่าถ้า name มันต้องการมี value มากกว่า 1 ตัวจะทำไง ยกตัวอย่างง่าย ๆ เลยเรื่องของสินค้าลองให้มีสินค้าดูสัก 3 รายการอยากรู้ว่า JSON จะทำยังไงก็เลยลองเขียนแบบนี้ดู

image

อ้าวไงมันออก Ruler ตัวสุดท้ายละ เออถ้าอย่างนี้มันน่าจะเป็น index นะนี่มี product เป็น name ตัวเดียวแต่มี value ถึง 3 ตัวยังไงน่าจะอ้างอิง index ได้นะลองเขียนใหม่ดู

image

อ้าวได้ undefined ซะงั้นแสดงว่ามันก็เป็น null อะดิแล้วทีนี้เราจะทำยังไงดี เออนึกได้พอดีมันมีคุณสมบัติอีกตัวที่ช่วยได้นั้นก็คือ array นั่นเองอย่างนี้ไปต่อได้แล้วงั้นลองเปลี่ยนมันซะในเมื่อมันมี name ตัวเดียวแต่ value ตั้ง 3 ตัวงั้นจัดใหม่ดีกว่า

image

อ้าวออกมาได้ซะงั้น แสดงว่ามันมีการเอาข้อดีของ array มาไว้ด้วย เข้าทางอย่างนี้ประยุกต์ได้หลายไอเดียแน่เลย

จากตัวอย่างที่ได้แสดงมาให้เห็นว่า value ไม่จำเป็นต้องเป็นข้อความเพียงอย่างเดียวมันสามารถเป็น array ได้ด้วย จึงสรุปได้ว่า

{“name”:[”value”]}

อย่างนั้นค่าจริง ๆ ใน [“value”] ไม่จำเป็นต้องเป็น string เพียงอย่างเดียวสามารถป็น number,object,arrya,boolean,null ได้ด้วย

ตัวอย่างที่ 5

อ้าวไงใน [..] ที่เป็น array เป็น object ได้ด้วยหรอนี้ถ้างั้นแสดงว่าเราก็สามารถใส่ json object ลงไปได้ซิ งั้นต้องลองลองดูแล้ว

image

โอ้วออกด้วยเหอะ สุด ๆ ไปเลยอย่างนี้ จากตัวอย่างในบรรทัดที่ 4 – 6 จะพบว่าเป็นการใส่ array ของ json object ลงไปซึ่งเป็นการเปลี่ยนค่าจาก array ในตัวอย่างที่ 4 ที่เป็น string เป็น json object แทน การเปลี่ยนแปลงอย่างนี้มีนัยยะสำคัญเรื่องของลำดับของตัวสินค้าโดยทันที เนื่องจาก product (ไม่ได้เติม s) ถูกจัดเก็บอยู่ภายในเครื่องหมาย [ ] ซึ่งข้อมูลภายใน [ ] จะถูกจัดลำดับโดยทันทีเพราะเป็น array ดังนั้นทำให้บรรทัดที่ 9 การเรียกใช้ products ( json object) ต้องระบุลำดับก่อนว่าจะต้องเข้าถึง index ตัวไหนแล้วจึงค่อยเรียกใช้ product(ไม่เติม s) ในการดึงค่าออกมา

ที่มา https://mryousgx.wordpress.com/2012/04/27/json-part-1-มารู้จักกับ-json-ซักนิด/

Template Settings

Color

For each color, the params below will give default values
Blue Red Oranges Green Purple Pink

Body

Background Color
Text Color

Header

Background Color

Footer

Select menu
Google Font
Body Font-size
Body Font-family
Direction