[JavaScript] การแปลงข้อมูล JSON ด้วย json2.js

JSON (JavaScript Object Notation) บน JavaScript นั้น เป็นของคู่กันมาแต่ไหนแต่ไร (ดูชื่อเต็มของ JSON ซิ เห็นไม๊ JavaScript ชัด ๆ) ซึ่งโดยทั่วไป เรามักจะพบการใช้งาน JSON บน JavaScript ด้วย jQuery โดยเมื่อทำการ Request ข้อมูลแบบ Ajax (ไม่ว่าจะเป็นการใช้คำสั่ง $.ajax, $.get, $.post หรือแม้แต่ $.getJSON) เราสามารถกำหนดให้ข้อมูลที่ส่งกลับมา เป็นแบบ JSON Object ได้ทั้งหมด

JavaScript+JSON

การแปลงข้อมูลระหว่าง JSON Object กับ String นั้น โดยทั่วไป แต่ละภาษาโปรแกรม จะมี Parser สำหรับการจัดการ ตัวอย่างบทความตอน [VB.NET] การแปลงข้อมูล JSON ด้วย DataContractJsonSerializer สำหรับบน JavaScript นั้น ก็มี json2.js ที่พัฒนาโดยคุณ Douglas Crockford จากการลองนำมาใช้งานดูก็พบว่า มันเป็น Parser ที่ใช้งานง่ายมาก ก็เลยมาเขียนเป็นบทความให้ได้อ่านกัน

 

JSON.parse

 

JSON String vs JSON Object

สมมติข้อมูล JSON เป็นแบบนี้

เมื่อเราเก็บข้อมูลอยู่ในตัวแปร String บน JavaScript จะเขียนได้เป็น

Ugh! เอามาเขียนใหม่ให้ดูง่าย เป็น

แต่ถ้าเก็บเป็น Object บน JavaScript จะเขียนได้เป็น

หรือเขียนใหม่ให้ดูง่าย เป็น

เห็นความแตกต่างแล้วใช่ไม๊ครับ ระหว่าง JSON String (มีเครื่องหมาย ” ” ครอบ เพราะมันก็คือตัวแปร String ธรรมดานั่นแหล่ะ) กับ JSON Object (มีเครื่องหมาย { } ครอบ) อย่าสับสนนะ

จากตัวอย่างด้านบน ไม่ว่าจะเป็น JSON String หรือ JSON Object ซึ่งมีการเก็บข้อมูลแค่ 3 ชุด และกำหนดค่าที่แน่นอนไว้แล้ว

แต่หากว่า ถ้าข้อมูลเยอะกว่านี้ หรือซับซ้อนกว่านี้ล่ะ และข้อมูลมาจากแหล่งอื่น เช่น Input มาจาก User ล่ะ ถ้าต้องเอาข้อมูลมายัดใส่ JSON String ก็ต่อ String เหนื่อยแน่ หรือถ้ายัดใส่ JSON Object ได้เลย ก็จะง่ายขึ้นมาหน่อยนึง

แล้วถ้ามีข้อมูลเป็น JSON String มาเลยล่ะ อยากจะให้ง่าย ก็ต้อง Convert เป็น JSON Object ซะก่อน ทำอย่างไรนั้น ดูหัวข้อต่อไปกันเลย

 

Convert JSON String to Object

สำหรับการแปลง String เป็น Object บน JavaScript นั้น สามารถใช้ function eval ได้ และสามารถใช้แปลง String เป็น JSON Object ได้เลย

 

Convert JSON Object to String

สำหรับการ Convert JSON Object เป็น String นั้น JavaScript ไม่มีคำสั่งใด ๆ ให้ใช้

เพราะฉะนั้น JavaScript เดิม ๆ ไม่สามารถแปลงได้

 

Get value from JSON Object

สำหรับการใช้งาน JSON Object บน JavaScript นั้นง่ายมาก ก็แค่ <json object name>.<key> ก็ได้ value ออกมาแล้ว เช่น Code ต่อไปนี้

 

Set value to JSON Object

ในทางกลับกัน เราสามารถกำหนดค่าให้ key ต่าง ๆ ใน JSON Object ได้ ดังนี้

 

Create JSON Object with JavaScript

สำหรับการสร้าง JSON Object ด้วย JavaScript แบบยืดหยุ่นขึ้นมาอีกหน่อย สำหรับข้อมูลที่ซับซ้อนกว่าตัวอย่างข้างต้น สมมติว่าเราจะมาจัดการกับข้อมูล JSON ต่อไปนี้กัน

สามารถเขียน Code ได้ดังนี้

 

Use json2.js

ก่อนอื่น ต้องไป Download json2.js มาก่อน (จิ้มเลยยยย)

แล้วนำไปใส่ใน Webpage ของเรา ดังนี้

เท่านี้ก็สามารถใช้ json2.js ได้แล้ว โดยจะมี Method ให้เรียกใช้อยู่ 2 ตัว นั่นก็คือ JSON.stringify และ JSON.parse

 

JSON.stringify

สำหรับ Method stringify ใช้สำหรับแปลง JSON Object เป็น JSON String มีวิธีใช้งานดังนี้

 

JSON.parse

ส่วน Method parse ใช้สำหรับแปลง JSON String เป็น JSON Object มีวิธีใช้งานดังนี้

 

แล้วจะเอาไปใช้ตอนไหน!?

เหตุที่ผมได้ค้นคว้าเกี่ยวกับ JSON Parser บน JavaScript นั้น เนื่องจากมีน้องในออฟฟิศ ได้สอบถามเกี่ยวกับการส่งข้อมูลไปยัง php ด้วย Ajax เพื่อนำไป Insert ลง Database ทีละหลาย ๆ Record โดยจำนวน Record ที่ได้ไม่คงที่ ก็เลยคิดถึงรูปแบบข้อมูลแบบ JSON ขึ้นมา ซึ่งสามารถเก็บข้อมูลแบบ key-value ได้ เก็บข้อมูลแบบ Array ก็ได้ ซึ่งตอบโจทย์นี้ได้แน่นอน แต่ไปติดอยู่ที่ว่า จะแปลง JSON Object เป็น JSON String เพื่อส่งด้วย Method POST นั้น บน JavaScript เดิม ๆ ไม่สามารถทำได้ ครั้นจะสร้าง String โดยการต่อ String ขึ้นมาเองแบบยาว ๆ ก็มีโอกาสเกิดความผิดพลาดสูง ก็เลยได้ Solution นี้มา และได้ทดลองนำไปใช้งานจริงเรียบร้อยแล้ว Big Smile

หวังว่าคงเป็นประโยชน์กับผู้ที่สนใจนะครับ

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.