ทำความรู้จักกับ JSON และสาเหตุที่ทำไมโปรแกรมเมอร์ถึงเจอ Error บ่อย
เวลาเราเขียนโปรแกรม โดยเฉพาะงานที่เกี่ยวข้องกับเว็บ เรามักจะต้องรับส่งข้อมูลด้วยรูปแบบที่เรียกว่า JSON (JavaScript Object Notation ซึ่งเป็นรูปแบบมาตรฐานในการแลกเปลี่ยนข้อมูลระหว่างเซิร์ฟเวอร์กับเว็บแอปพลิเคชัน) หลายคนอาจจะเคยเจอหน้าจอดำๆ หรือข้อความแจ้งเตือนแปลกๆ อย่าง "Unexpected token" เวลาที่โปรแกรมพยายามอ่านข้อมูลเหล่านี้
ลองนึกภาพว่า JSON เหมือนกับกระดาษจดรายการของที่ต้องซื้อเข้าบ้าน ถ้าเราเขียนผิดกฎนิดเดียว เช่น ลืมใส่คอมม่า หรือเขียนสลับลำดับ คนที่มาอ่านรายการนี้ต่อก็จะงงและทำงานต่อไม่ได้ โปรแกรมคอมพิวเตอร์ก็เช่นกัน มันมีความละเอียดอ่อนสูงมากและไม่ยอมให้เราทำผิดกฎแม้แต่จุดเดียว
การเข้าใจว่าทำไมข้อความแจ้งเตือนเหล่านั้นถึงเกิดขึ้น จะช่วยให้เราไม่ต้องนั่งงมหาจุดผิดนานเป็นชั่วโมง Syntax (ไวยากรณ์หรือกฎการเขียนโค้ด) ของ JSON นั้นเข้มงวดกว่าการเขียน Object (กลุ่มข้อมูลที่จัดเก็บรวมกัน) ในภาษา JavaScript ทั่วไปอย่างมาก ซึ่งเป็นจุดที่มือใหม่มักจะพลาดกันบ่อยที่สุดในขั้นตอนการพัฒนา
1. ปัญหาคลาสสิก: เจ้าคอมม่าส่วนเกินที่ชอบโผล่มา
ปัญหาที่เจอบ่อยที่สุดอันดับหนึ่งคือ Trailing comma (เครื่องหมายจุลภาคที่วางไว้หลังข้อมูลตัวสุดท้าย) ในภาษาโปรแกรมหลายภาษามันอาจจะอนุญาตให้เราใส่คอมม่าปิดท้ายได้ แต่ใน JSON นั้นถือว่าเป็นเรื่องผิดกฎร้ายแรงและจะทำให้โปรแกรมหยุดทำงานทันที
มือใหม่มักจะเผลอใส่คอมม่าทิ้งไว้หลังจากแก้ไขข้อมูลใน List (รายการข้อมูล) หรือหลังจากลบบรรทัดสุดท้ายออกไป ทำให้ตัวโปรแกรมพยายามมองหาข้อมูลตัวถัดไปที่ไม่มีอยู่จริง ส่งผลให้เกิดข้อความเตือนว่ามี Token (หน่วยย่อยของข้อมูล) ที่ไม่คาดคิดโผล่มาในตำแหน่งที่ผิด
วิธีแก้คือการตรวจสอบให้แน่ใจว่า ข้อมูลตัวสุดท้ายในแต่ละ Object หรือ Array (ชุดข้อมูลที่เรียงลำดับกัน) จะต้องไม่มีเครื่องหมายคอมม่าปิดท้ายเสมอ หากเราเผลอใส่ไว้ ให้รีบลบออกทันที การจัดระเบียบโค้ดให้สะอาดจะช่วยให้เราเห็นจุดผิดเหล่านี้ได้ง่ายขึ้นมาก
// ตัวอย่างแบบที่ผิด (Invalid JSON)
{
"name": "Alex",
"age": 25,
}
// ตัวอย่างแบบที่ถูก (Valid JSON)
{
"name": "Alex",
"age": 25
}ในตัวอย่างแรก บรรทัดที่ "age": 25 มีเครื่องหมายคอมม่าตามหลัง ซึ่งใน JSON จะไม่ยอมให้มีตัวคั่นหลังข้อมูลตัวสุดท้าย ส่วนตัวอย่างที่สองคือการเขียนที่ถูกต้องโดยไม่มีคอมม่าเกินมา ผลลัพธ์ที่ได้คือโปรแกรมสามารถประมวลผลข้อมูลได้ปกติโดยไม่แจ้งเตือน Error ใดๆ
2. เครื่องหมายคำพูด: กฎเหล็กที่ต้องใช้ Double Quotes เท่านั้น
อีกหนึ่งความผิดพลาดที่พบได้บ่อยคือการใช้ Single quotes (เครื่องหมายคำพูดเดี่ยว) แทนที่จะเป็น Double quotes (เครื่องหมายคำพูดคู่) ซึ่งในภาษา JavaScript เราอาจคุ้นเคยกับการเขียนแบบไหนก็ได้ แต่ JSON บังคับว่าทุกอย่างที่เป็นข้อความต้องใช้เครื่องหมายคำพูดคู่เท่านั้น
การใช้เครื่องหมายคำพูดผิดประเภทจะทำให้โปรแกรมมองว่าข้อมูลนั้นเป็นรูปแบบที่ใช้ไม่ได้ (Invalid format) และไม่สามารถทำการ Parse (แปลงข้อมูลจากข้อความให้กลายเป็น Object ที่โปรแกรมนำไปใช้ต่อได้) ออกมาได้เลย ซึ่งมักจะแสดง Error ว่า "Expected property name" หรือชื่อคุณสมบัติที่คาดหวังไม่ถูกต้อง
หากเราจำเป็นต้องมีเครื่องหมายคำพูดคู่ซ้อนอยู่ข้างในข้อความอีกทีหนึ่ง เราต้องทำการ Escape (การใส่สัญลักษณ์พิเศษเพื่อบอกโปรแกรมว่าเครื่องหมายนั้นเป็นส่วนหนึ่งของข้อความ ไม่ใช่เครื่องหมายปิด) ด้วยการเติมเครื่องหมาย Backslash ( \ ) ไว้ข้างหน้า เพื่อบอกให้โปรแกรมรู้ว่านี่คือข้อความธรรมดา
// ตัวอย่างแบบที่ผิด (Invalid JSON)
{
'username': 'Admin'
}
// ตัวอย่างแบบที่ถูก (Valid JSON)
{
"username": "Admin"
}ในโค้ดตัวอย่างแรก เราใช้เครื่องหมายคำพูดเดี่ยวครอบทั้งชื่อและค่าข้อมูล ซึ่งผิดกฎของ JSON อย่างรุนแรง ส่วนตัวอย่างที่สองเป็นการแก้ไขโดยใช้เครื่องหมายคำพูดคู่ ผลลัพธ์ที่ควรเห็นคือโปรแกรมจะอ่านข้อมูลได้ถูกต้องและนำไปแสดงผลได้โดยไม่มี Error คั่นจังหวะ
3. ลืมใส่เครื่องหมายคำพูดที่ชื่อ Key (หัวข้อข้อมูล)
ใน JavaScript เราสามารถเขียนชื่อ Key (ชื่อของข้อมูลที่ใช้ระบุค่า) โดยไม่ต้องมีเครื่องหมายคำพูดได้ เช่น { name: "John" } ซึ่งดูสะดวกดีและอ่านง่าย แต่ในมาตรฐาน JSON นั้น ทุกๆ Key จะต้องถูกครอบด้วยเครื่องหมายคำพูดคู่เสมอ ห้ามละเว้นเด็ดขาด
การลืมใส่เครื่องหมายคำพูดที่ชื่อ Key เป็นเรื่องที่มือใหม่เปลี่ยนสายงานมักจะพลาด เพราะความเคยชินจากการเขียนโค้ด JavaScript ปกติ ทำให้ตอนดึงข้อมูลจาก Database (ฐานข้อมูลที่เก็บข้อมูลในแอป) ออกมาแสดงผล แล้วเกิดปัญหา Parse Error ขึ้นมาโดยไม่รู้สาเหตุ
ทางที่ดีที่สุดคือการฝึกนิสัยให้เขียนเครื่องหมายคำพูดกำกับทุกครั้งจนเป็นความเคยชิน ไม่ว่าเราจะเขียนโค้ดในภาษาไหนก็ตาม เพราะการทำตามมาตรฐานสากลจะช่วยให้โปรเจกต์ของเราสามารถส่งต่อหรือเชื่อมต่อกับระบบอื่นได้โดยไม่มีปัญหาเรื่องการรับส่งข้อมูล
// ตัวอย่างแบบที่ผิด (Invalid JSON)
{
id: 101,
status: "active"
}
// ตัวอย่างแบบที่ถูก (Valid JSON)
{
"id": 101,
"status": "active"
}บรรทัดแรกของตัวอย่างที่ผิดไม่ได้ใส่เครื่องหมายคำพูดที่คำว่า id และ status ทำให้ JSON Parser ไม่เข้าใจว่านี่คือโครงสร้างที่ถูกต้อง ส่วนตัวอย่างที่สองมีการใส่เครื่องหมายคำพูดคู่ครอบชื่อ Key ทั้งหมด ผลลัพธ์คือโปรแกรมจะทำงานผ่านฉลุยและดึงค่า 101 ออกมาใช้งานได้ตามที่ตั้งใจ
4. ความเข้าใจผิดเรื่องค่าข้อมูล: สิ่งที่ JSON ไม่รองรับ
หลายคนพยายามใส่ค่าอย่าง undefined, NaN (ค่าที่ไม่ใช่ตัวเลข), หรือ Infinity ลงไปในไฟล์ JSON ซึ่งต้องบอกเลยว่า JSON ไม่รู้จักค่าเหล่านี้ครับ หากเราใส่ลงไป โปรแกรมจะมองว่าเป็นค่าที่ผิดปกติและทำให้เกิด Error ทันที
นอกจากนี้ เลขศูนย์นำหน้าอย่าง 007 ก็ไม่สามารถใช้ได้ใน JSON รวมถึงการเขียนตัวเลขแบบ Hexadecimal (เลขฐานสิบหก) ก็ทำไม่ได้เช่นกัน หากเราต้องการเก็บข้อมูลจำพวกวันที่ ควรเก็บในรูปแบบ ISO 8601 (รูปแบบมาตรฐานสากลของวันที่ เช่น "2023-10-27T10:00:00Z") เพื่อให้ทุกระบบอ่านค่าได้ตรงกัน
ถ้าเราต้องการสื่อสารว่าข้อมูลนั้นไม่มีค่าจริงๆ ให้ใช้ค่า null แทน หรือถ้าเป็นข้อความก็ให้เก็บเป็น String (ข้อความตัวอักษร) ไปเลย การรู้ข้อจำกัดเหล่านี้จะทำให้เราออกแบบ API (ช่องทางเชื่อมต่อข้อมูลระหว่างโปรแกรม) ได้ราบรื่นและลดปัญหาบั๊กที่แก้ไม่ตกไปได้เยอะมาก
// ตัวอย่างการเก็บข้อมูลที่ถูกต้อง
{
"active": true,
"score": null,
"created_at": "2023-10-27T08:00:00Z"
}ตัวอย่างนี้แสดงการใช้งานค่าที่ถูกต้องตามกฎ JSON โดยใช้ null แทนค่าที่ไม่มีอยู่จริง และเก็บวันที่ในรูปแบบ ISO 8601 ผลลัพธ์ที่ได้คือข้อมูลชุดนี้จะมีความสมบูรณ์และสามารถส่งผ่านระบบต่างๆ ได้อย่างไร้รอยต่อ
5. ปัญหาล่องหน: เรื่องของ Comment และอักขระแฝง
หลายคนชอบใส่ // หรือ /* */ เพื่อเขียนอธิบายโค้ดในไฟล์ JSON แต่รู้ไหมว่ามาตรฐาน JSON จริงๆ นั้นห้ามใส่ Comment (ข้อความอธิบายที่โปรแกรมจะมองข้ามไป) โดยเด็ดขาด ถ้าใส่ลงไป โปรแกรมจะมองว่าเป็น Token ที่ผิดและพ่น Error ออกมาทันที
อีกปัญหาที่น่าปวดหัวคือ BOM (Byte Order Mark หรือรหัสพิเศษที่อาจติดมากับไฟล์) ซึ่งเป็นอักขระที่มองไม่เห็นแต่มันแฝงตัวอยู่ที่ตำแหน่งแรกของไฟล์ ทำให้โปรแกรมรายงานว่า "Unexpected token" ทั้งที่เราดูด้วยตาเปล่าแล้วว่าทุกอย่างเขียนถูกต้องเป๊ะๆ
หากคุณต้องการใส่คำอธิบายจริงๆ แนะนำให้ใช้รูปแบบอื่น เช่น YAML หรือ JSONC (JSON with Comments) แทน หรือถ้าเป็นไปได้ให้ทำเอกสารอธิบายแยกต่างหาก นอกจากนี้ให้ระวังเรื่องการคัดลอกไฟล์จากเว็บ เพราะอาจมีอักขระแปลกปลอมติดมาด้วย ให้ลองลบและพิมพ์ใหม่ใน Code Editor (โปรแกรมสำหรับเขียนโค้ด) ที่สะอาดดูครับ
สรุป: ฝึกสังเกตและใช้เครื่องมือช่วย
การแก้ปัญหา JSON Error ไม่ใช่เรื่องยากถ้าเราเข้าใจกฎเหล็กทั้ง 5 ข้อที่ว่ามานี้ ไม่ว่าจะเป็นเรื่องคอมม่าส่วนเกิน, เครื่องหมายคำพูด, หรือข้อจำกัดของค่าข้อมูล การหมั่นตรวจสอบโค้ดด้วยตัวเองจะช่วยให้เราเก่งขึ้นในฐานะโปรแกรมเมอร์
คำแนะนำจากรุ่นพี่คือ อย่าพยายามนั่งเดาว่าผิดตรงไหนด้วยตาเปล่าเพียงอย่างเดียว ให้ใช้เครื่องมืออย่าง JSONLint (เว็บไซต์สำหรับตรวจสอบไวยากรณ์ JSON) เพื่อนำโค้ดไปวางเช็คความถูกต้อง เครื่องมือพวกนี้จะบอกตำแหน่งที่ผิดให้เราเห็นชัดเจน ซึ่งเป็นตัวช่วยที่ดีมากสำหรับมือใหม่
ลองนำเทคนิคนี้ไปปรับใช้กับโปรเจกต์ของคุณดูครับ ครั้งหน้าที่เจอ Error ลองไล่เช็คตามกฎเหล่านี้ทีละข้อ ผมเชื่อว่าคุณจะแก้ปัญหาได้รวดเร็วขึ้นและเขียนโค้ดได้มั่นใจกว่าเดิมแน่นอน การเป็นโปรแกรมเมอร์ที่ดีไม่ได้วัดกันที่ว่าไม่เคยเจอ Error แต่ดูที่ว่าเราแก้ Error นั้นได้อย่างไรมากกว่าครับ
ที่มา: How to Fix "Unexpected Token" and Other Invalid JSON Errors — DEV Community
