JSON คือไฟล์อะไร? อ่านข้อมูล JSON ให้เป็น สำหรับมือใหม่

ลองนึกภาพว่าคุณเพิ่งพิมพ์ https://api.github.com/users/octocat ลงเบราว์เซอร์ตามบทความ API ที่เราเคยพาลอง แล้วหน้าจอก็เต็มไปด้วยวงเล็บปีกกา เครื่องหมายคำพูด โคลอน และจุลภาค ดูเหมือนโค้ด แต่ก็ไม่เหมือนโค้ดที่เคยเห็น หลายคนหยุดอยู่ตรงนั้นเพราะคิดว่าต้องเรียนภาษาใหม่อีกหนึ่งภาษาก่อนถึงจะอ่านออก

ข่าวดีคือไม่ต้อง สิ่งที่คุณเห็นคือ JSON และกติกาทั้งหมดของมันสั้นพอจะอ่านจบในบทความเดียว วันนี้ Superdev Academy จะพาอ่าน JSON จากคำตอบจริงของ GitHub ทีละบรรทัด ตั้งแต่ Object, Array, คู่ Key กับ Value ไปจนถึงข้อผิดพลาดที่ทำให้ไฟล์ JSON พังบ่อยที่สุด

JSON คือไฟล์ข้อมูลแบบข้อความ ไม่ใช่ภาษาโปรแกรม

JSON ย่อมาจาก JavaScript Object Notation เป็นรูปแบบการเขียนข้อมูลเป็นข้อความธรรมดา เพื่อให้โปรแกรมต่างภาษากันส่งข้อมูลหากันได้ มาตรฐาน ECMA-404 อธิบายว่า JSON คือ Text Syntax (รูปแบบการเขียนข้อความ) ที่ช่วยให้ข้อมูลที่มีโครงสร้างส่งต่อกันได้ระหว่างภาษาโปรแกรมทุกภาษา ส่วนเอกสาร RFC 8259 ของ IETF กำหนดนามสกุลไฟล์เป็น .json และชื่อชนิดข้อมูลเป็น application/json

พูดง่ายๆ ไฟล์ JSON คือไฟล์ข้อความที่เปิดด้วย Notepad ก็อ่านได้ ข้างในมีแค่ข้อมูล ไม่มีคำสั่ง if ไม่มีลูป ไม่มีฟังก์ชัน มันจึงไม่ใช่ภาษาโปรแกรม มันทำงานเองไม่ได้ ต้องมีโปรแกรมที่เขียนด้วย JavaScript, Python, Go หรือภาษาอื่นมาอ่านมันอีกที

Fun Fact: ECMA-404 ฉบับปี 2017 ใส่เชิงอรรถไว้เลยว่า JSON ออกเสียงแบบชื่อ "Jason" ใน Jason and The Argonauts คนไทยจึงอ่านว่า "เจสัน" ได้เต็มปาก

อ่าน JSON จากของจริง: คำตอบของ GitHub

นี่คือคำตอบจาก GitHub REST API เมื่อขอข้อมูลบัญชี octocat เราตัดมาเฉพาะบางช่อง ค่าบางตัวอย่าง public_repos อาจเปลี่ยนไปตามวันที่คุณเปิด (เราดึงเมื่อ 29 กันยายน 2026) แต่หน้าตาโครงสร้างจะเหมือนเดิม

{
  "login": "octocat",
  "id": 583231,
  "name": "The Octocat",
  "site_admin": false,
  "email": null,
  "public_repos": 8
}

อ่านได้ด้วยกติกา 4 ข้อ

• ทั้งก้อนครอบด้วยวงเล็บปีกกา { } เรียกว่า Object (ออบเจกต์) คือกล่องที่เก็บข้อมูลหลายช่องไว้ด้วยกัน

• แต่ละช่องเป็นคู่ของ Key กับ Value คั่นด้วยโคลอน เช่น "login": "octocat" แปลว่าช่องชื่อ login มีค่าเป็น octocat

• Key ต้องอยู่ในเครื่องหมายคำพูดคู่ (") เสมอ

• แต่ละคู่คั่นด้วยจุลภาค และคู่สุดท้ายไม่มีจุลภาคต่อท้าย

แค่นี้คุณก็อ่านคำตอบข้างบนออกแล้ว บัญชีนี้ชื่อ The Octocat มีเลขประจำตัว 583231 ไม่ใช่ผู้ดูแลระบบของ GitHub และไม่ได้เปิดเผยอีเมล

ค่าใน JSON มีแค่ 6 ชนิด

RFC 8259 ระบุว่า JSON แทนข้อมูลได้ 4 ชนิดพื้นฐานกับ 2 ชนิดที่เป็นโครงสร้าง รวมเป็น 6 ชนิด ทุกชนิดมีตัวอย่างอยู่ในคำตอบของ GitHub แล้ว

• String (ข้อความ): อยู่ในเครื่องหมายคำพูดคู่ เช่น "The Octocat"

• Number (ตัวเลข): เขียนเลขเปล่าๆ ไม่มีเครื่องหมายคำพูด เช่น 583231

• Boolean (จริงหรือเท็จ): มีแค่ true กับ false เช่น "site_admin": false

• null: แปลว่าไม่มีค่า เช่น "email": null

• Object: กล่อง { } ที่ข้างในเป็นคู่ Key กับ Value

• Array (อาร์เรย์): รายการเรียงลำดับ ครอบด้วยวงเล็บเหลี่ยม [ ] เช่น "topics": []

จุดที่มือใหม่พลาดบ่อยคือ "583231" กับ 583231 ไม่ใช่ของเดียวกัน ตัวแรกเป็นข้อความที่บังเอิญเป็นตัวเลข ตัวหลังเป็นตัวเลขจริงที่เอาไปคำนวณได้ และ RFC 8259 กำหนดให้ true, false กับ null ต้องเป็นตัวพิมพ์เล็กเท่านั้น เขียน True หรือ NULL เมื่อไหร่ ไฟล์ก็อ่านไม่ได้ทันที

Object กับ Array ซ้อนกันได้ เหมือนกล่องในกล่อง

ข้อมูลจริงไม่ได้แบนเป็นชั้นเดียว ลองขอรายการ Repository ของ octocat ผ่าน https://api.github.com/users/octocat/repos คำตอบจะขึ้นต้นด้วย [ เพราะเป็น Array ของ Repository หลายตัว เราตัดมาให้ดูตัวเดียวและเฉพาะบางช่อง

[
  {
    "name": "Spoon-Knife",
    "private": false,
    "owner": {
      "login": "octocat",
      "type": "User"
    },
    "language": "HTML",
    "topics": []
  }
]

อ่านจากนอกเข้าใน ชั้นนอกสุดคือ Array ข้างในมี Object ของ Repository ชื่อ Spoon-Knife และในนั้นมีช่อง owner ซึ่งเป็น Object อีกกล่องที่บอกว่าเจ้าของคือ octocat ส่วน topics เป็น Array ว่าง แปลว่า Repository นี้ยังไม่ได้ติดหัวข้อไว้

ถ้าอยากได้ชื่อเจ้าของ ให้ไล่ทางเดินแบบนี้: เริ่มจากตัวแรกของ Array เข้าไปที่ owner แล้วหยิบ login ออกมา ในภาษา JavaScript เขียนสั้นๆ ได้เป็น data[0].owner.login ซึ่งจะได้ค่า "octocat" ออกมา การอ่าน JSON ที่ซ้อนหลายชั้นจึงไม่ได้ยากขึ้น แค่ต้องเปิดกล่องทีละชั้น

3 จุดที่ทำให้ JSON พังบ่อยที่สุด

JSON เข้มงวดกว่าที่หน้าตาบอก ขาดหรือเกินไปตัวเดียว โปรแกรมก็ปฏิเสธทั้งไฟล์ เราลองส่งข้อความที่ผิดทั้ง 3 แบบเข้า JSON.parse() ใน Node.js v26 ข้อความ Error ที่ได้เป็นแบบนี้ (ถ้าใช้เบราว์เซอร์หรือภาษาอื่น ถ้อยคำจะต่างไป แต่ความหมายเหมือนกัน)

1. จุลภาคเกินท้ายรายการ (Trailing Comma)

{"login": "octocat",}
SyntaxError: Expected double-quoted property name in JSON at position 20 (line 1 column 21)

โปรแกรมเห็นจุลภาคแล้วรอ Key ตัวถัดไป แต่เจอวงเล็บปิดแทน

2. ใช้เครื่องหมายคำพูดเดี่ยว

{'login': 'octocat'}
SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2)

JavaScript ยอมให้ใช้ ' ได้ แต่ JSON รับแค่ " เท่านั้น ทั้ง Key และ String

3. ใส่ Comment

{"login": "octocat" // บัญชีตัวอย่าง
}
SyntaxError: Expected ',' or '}' after property value in JSON at position 20 (line 1 column 21)

ตามเอกสาร MDN JSON ไม่รองรับ Comment เลย ทั้งแบบ // และ /* */

ข้อสังเกตที่ช่วยได้มากคือตัวเลข position ในข้อความ Error มันบอกตำแหน่งตัวอักษรที่โปรแกรมเริ่มอ่านไม่ออก นับจาก 0 ให้ไปดูตรงนั้นและตัวก่อนหน้า ส่วนใหญ่จะเจอต้นเหตุภายในไม่กี่ตัวอักษร

แต่ settings.json ของ VS Code ก็ใส่ Comment ได้นี่

จริง และถ้าคุณเคยเปิดไฟล์ตั้งค่าของ VS Code ก็คงเห็น // อยู่ในนั้น เอกสารของ VS Code อธิบายว่าไฟล์อย่าง settings.json, tasks.json และ launch.json ใช้โหมด JSON with Comments (jsonc) ซึ่งยอมให้ใส่ Comment ได้ และยอมรับจุลภาคท้ายรายการด้วย แต่จะขึ้นคำเตือน

แต่นั่นคือส่วนขยายที่โปรแกรมหนึ่งเลือกยอมรับเอง RFC 8259 เปิดช่องให้ Parser (ตัวอ่าน JSON) รับรูปแบบที่ไม่ใช่ JSON ได้ถ้าอยากทำ ไม่ได้แปลว่าทุกโปรแกรมจะยอม ไฟล์ package.json ของ Node.js เป็นตัวอย่างฝั่งตรงข้าม เอกสารของ npm เขียนไว้ชัดว่าต้องเป็น JSON จริงๆ ไม่ใช่แค่ Object ของ JavaScript

กติกาที่ปลอดภัยจึงเป็นแบบนี้ ไฟล์ที่ต้องส่งให้โปรแกรมอื่นอ่าน หรือข้อมูลที่ส่งผ่าน API ให้เขียนเป็น JSON ตามมาตรฐานเท่านั้น อย่าคิดว่าที่เครื่องเราอ่านได้ ปลายทางจะอ่านได้ด้วย

JSON ใช้ทำอะไร: 4 ที่ที่คุณจะเจอมันแน่ๆ

พอรู้จักหน้าตาแล้ว คุณจะเริ่มเห็นมันแทบทุกที่ในงานเขียนโปรแกรม

• คำตอบจาก API: API บนเว็บจำนวนมากส่งข้อมูลกลับมาเป็น JSON แบบที่เราเห็นจาก GitHub ถ้ายังไม่เคยลองเรียกเอง อ่านต่อได้ที่ API คืออะไร ทำงานอย่างไร พร้อมตัวอย่างสำหรับมือใหม่

• package.json: ทุกโปรเจกต์ Node.js มีไฟล์นี้ไว้บอกชื่อโปรเจกต์ เวอร์ชัน และรายการ Library ที่ใช้ ในไฟล์นี้ช่อง name กับ version สำคัญที่สุดเมื่อจะเผยแพร่แพ็กเกจ

• ไฟล์ตั้งค่า: โปรแกรมจำนวนมากเก็บการตั้งค่าเป็นไฟล์ .json รวมถึงโปรแกรมแก้โค้ดอย่าง VS Code

• คำตอบจาก AI: เวลาอยากให้ AI ตอบกลับมาเป็นข้อมูลที่โปรแกรมเอาไปใช้ต่อได้ ก็มักสั่งให้ตอบเป็น JSON ซึ่งเราเคยเขียนไว้ใน Golang The Series EP.147: Structured Output

ขั้นต่อไป: ให้โปรแกรมอ่าน JSON แทนตา

ในภาษา JavaScript มีเครื่องมือมาให้ในตัว 2 ตัว JSON.parse() แปลงข้อความ JSON ให้เป็นข้อมูลที่โปรแกรมใช้ได้ ส่วน JSON.stringify() ทำกลับกัน คือแปลงข้อมูลในโปรแกรมเป็นข้อความ JSON เพื่อส่งต่อหรือบันทึกลงไฟล์

JSON.stringify({ login: "octocat", public_repos: 8 })
// ได้ข้อความ {"login":"octocat","public_repos":8}

สังเกตว่า JSON.stringify() เติมเครื่องหมายคำพูดคู่ให้ Key ทุกตัวเอง นี่คือเหตุผลที่ข้อมูลซึ่งให้โปรแกรมสร้าง แทบไม่เคยเจอปัญหา 3 ข้อข้างบน ส่วนใหญ่ JSON พังตอนที่คนพิมพ์เองด้วยมือ ถ้าอยากเห็นว่าภาษาอื่นจัดการ JSON ต่างจาก JavaScript ยังไง ตอน JS2GO EP.22 การทำงานกับ JSON เทียบให้ดูกับภาษา Go แบบละเอียด

สรุป: JSON คือไฟล์อะไร อ่านยังไง

JSON คือไฟล์ข้อความที่เก็บข้อมูลตามกติกาชุดเล็กๆ ไม่ใช่ภาษาโปรแกรม ข้อมูลอยู่ในรูปคู่ Key กับ Value ภายใน Object { } หรือเรียงเป็นรายการใน Array [ ] ค่าที่ใส่ได้มีแค่ 6 ชนิด คือ String, Number, true/false, null, Object และ Array ส่วนสิ่งที่ทำให้ไฟล์พังบ่อยที่สุดคือจุลภาคเกิน เครื่องหมายคำพูดเดี่ยว และ Comment

วิธีที่ดีที่สุดที่จะอ่าน JSON คล่องคือเปิดของจริงบ่อยๆ ลองเปิด https://api.github.com/users/octocat/repos แล้วหาชื่อภาษาของแต่ละ Repository ด้วยตาก่อน จากนั้นลองพิมพ์ JSON สั้นๆ เองแล้วส่งเข้า JSON.parse() ถ้ามันขึ้น Error ให้อ่านตำแหน่งที่มันบอก คุณจะเก่งเรื่องนี้เร็วกว่าการท่องกติกาหลายเท่า

ติดตามบทความและเทคนิคสำหรับคนเริ่มต้นสายโปรแกรมเมอร์ได้ที่ช่องทางของเรา

Facebook: Superdev Academy Thailand — https://www.facebook.com/superdev.academy.th

YouTube: Superdev Academy Channel — https://www.youtube.com/@SuperdevAcademy

Instagram: @superdevacademy — https://www.instagram.com/superdevacademy/

TikTok: @superdevacademy — https://www.tiktok.com/@superdevacademy?lang=th-TH