JSONata Tester: เครื่องมือคิวรีและแปลงข้อมูล JSON ในเบราว์เซอร์

ถ้าคุณเคยเจอ JSON ที่มีโครงสร้างซับซ้อนซ้อนกันหลายชั้น แล้วต้องนั่งเขียนโค้ด JavaScript เพื่อดึงข้อมูลเพียงไม่กี่ฟิลด์ออกมา คุณคงรู้ดีว่ามันเสียเวลาแค่ไหน JSONata คือภาษาคิวรีและ transformation ที่ออกแบบมาสำหรับ JSON โดยเฉพาะ ได้แรงบันดาลใจจาก XPath ของโลก XML แต่เบากว่าและเขียนง่ายกว่ามาก ปัญหาคือการลองนิพจน์ JSONata มักต้องตั้ง environment หรือเขียนสคริปต์ทดสอบก่อนเสมอ

JSONata Tester ตัดปัญหานี้ออกไปทั้งหมด เพราะเป็นเว็บที่ให้คุณวาง JSON ใส่คิวรี แล้วเห็นผลลัพธ์ทันทีใน browser โดยใช้เอนจิน JSONata อย่างการรันฝั่ง client ทำงานได้ 100% ในเบราว์เซอร์ ไม่ต้องสมัครสมาชิก ไม่ต้องส่งข้อมูลขึ้นเซิร์ฟเวอร์ใด ๆ ข้อมูลของคุณจึงปลอดภัยตั้งแต่ JSON ทดสอบไปจนถึง response จริงจาก API ที่มีข้อมูลละเอียดอ่อน

บทความนี้จะพาคุณไปทำความรู้จักเครื่องมือนี้ตั้งแต่วิธีใช้งานพื้นฐาน ไปจนถึงการอ่านและเขียนนิพจน์ JSONata ให้คล่องตัว พร้อมกรณีใช้งานจริงที่นักพัฒนาเจอบ่อยที่สุด

ทำไมต้องใช้ JSONata Tester?

• เห็นผลลัพธ์ทันที ไม่ต้องตั้งค่า Node.js หรือ install package ใด ๆ วาง JSON ใส่คิวรีแล้วรันได้เลยในไม่กี่วินาที
• ใช้เอนจิน JSONata อย่างการ ผลลัพธ์ที่ได้ตรงกับสิ่งที่จะเกิดขึ้นจริงเมื่อเอานิพจน์ไปใช้ใน production ไม่ใช่การจำลอง
• ความเป็นส่วนตัวสูงสุด ทุกอย่างประมวลผลใน browser ข้อมูล JSON ของคุณไม่ถูกอัปโหลดไปไหนเลย
• แยก error ให้ชัดเจน บอกแยกระหว่าง parse error (JSON ที่วางมีปัญหา) กับ runtime error (นิพจน์คิวรีมีปัญหา) ทำให้ debug เร็วขึ้นมาก
• ผลลัพธ์อ่านง่าย output JSON ถูกจัดรูปแบบสวยงาม อ่านโครงสร้างได้ทันทีโดยไม่ต้อง copy ไป pretty-print ที่อื่น
• เรียนรู้ผ่านตัวอย่าง มีตัวอย่างในตัว 5 แบบที่ใช้ซ้ำได้ ตั้งแต่ path พื้นฐานไปจนถึง aggregation และการนับค่าที่ไม่ซ้ำ

ฟีเจอร์หลัก

รายละเอียดที่น่าสนใจเพิ่มเติมมีดังนี้

• การแยกประเภท error ช่วยตอบคำถามสำคัญว่า "ข้อมูลผิดหรือคิวรีผิด" ได้ทันที ไม่ต้องไล่猜เอง
• ตัวอย่างในตัวแต่ละแบบมาพร้อม JSON ต้นทางและนิพจน์ที่ใช้งานได้จริง เหมาะกับการเรียนไวยากรณ์แบบลงมือทำ
• เนื่องจากรันใน browser ล้วน ๆ จึงใช้งานได้แม้ออฟไลน์หลังโหลดหน้าเว็บแล้ว

วิธีใช้งาน JSONata Tester

1. เปิดหน้า JSONata Tester ใน browser ของคุณ ไม่ต้องล็อกอินหรือตั้งค่าอะไร
2. วาง JSON ต้นทางลงในช่อง input ด้านซ้าย เช่น response จาก API หรือไฟล์ config ที่ต้องการดึงข้อมูล
3. พิมพ์นิพจน์ JSONata ลงในช่องคิวรี เช่น people.name หรือคัดลอกจากตัวอย่างในบทความนี้ไปลอง
4. รันคิวรีแล้วดูผลลัพธ์ในแผงด้านขวา ถ้านิพจน์ถูกต้อง คุณจะเห็น JSON output ที่จัดรูปแบบแล้วทันที
5. ถ้าเกิด error ให้อ่านข้อความเพื่อดูว่าเป็น parse error จาก JSON ต้นทางหรือ runtime error จากคิวรี แล้วแก้จุดนั้นแล้วรันซ้ำ

ลูปการทำงานคือ แก้คิวรี รัน ดูผล แล้ววนซ้ำ เหมาะกับการเก็บรายละเอียดว่าฟิลด์ไหนอยู่ตรงไหนและโครงสร้างตอบสนองจริงหน้าตาเป็นอย่างไร

ทำความเข้าใจไวยากรณ์ JSONata

JSONata ออกแบบมาให้เรียนเร็ว เพราะส่วนใหญ่อ่านได้เหมือนภาษาธรรมชาติ ลองใช้ JSON ตัวอย่างชุดนี้ตลอดหัวข้อ

{
  "people": [
    { "name": "Somchai", "age": 34, "city": "Bangkok" },
    { "name": "Suda", "age": 28, "city": "Chiang Mai" },
    { "name": "Anon", "age": 41, "city": "Bangkok" }
  ],
  "items": [{ "price": 120 }, { "price": 80 }, { "price": 250 }]
}

Path navigation คือพื้นฐานสุดของ JSONata เขียนเส้นทางเดินเข้าไปในโครงสร้างแบบไล่ระดับ เช่น ดึงชื่อทุกคนจาก array

people.name

ผลลัพธ์คือ ["Somchai", "Suda", "Anon"] สังเกตว่าไม่ต้องเขียน loop เองเลย JSONata จะกระจาย (map) ให้อัตโนมัติ

Filter ใช้กรองสมาชิกใน array ตามเงื่อนไขที่อยู่ในวงเล็บเหลี่ยม เช่น เอาเฉพาะคนอายุมากกว่า 30

people[age > 30].name

Projection ใช้หยิบเฉพาะบางฟิลด์ออกมา โดยทั่วไปใช้เครื่องหมายจุดต่อจาก filter ได้เลย

people[age > 30].{"name": name, "city": city}

Object construction คือการสร้างโครงสร้างใหม่ทั้งก้อนด้วยวงเล็บปีกกา ใช้คู่กับ projection ได้ทรงพลังมาก ตัวอย่างด้านบนจะได้ array ของ object ที่มีแค่ name กับ city

Built-in functions เติมความสามารถด้านคำนวณและจัดการข้อมูล เขียนนำหน้าด้วยเครื่องหมาย $

{"total": $sum(items.price), "average": $average(items.price)}

ฟังก์ชันที่ใช้บ่อยมี $sum, $average, $count, $join, $distinct, $string, $number และ $now ตัวอย่างการเชื่อม string

$join(people.name, ', ')

ได้ผลลัพธ์ "Somchai, Suda, Anon" ส่วนการนับค่าที่ไม่ซ้ำกันใช้ $count คู่กับ $distinct ได้แบบนี้

$count($distinct(people.city))

จุดแข็งของ JSONata คือนิพจน์สั้น ๆ หลายตัวต่อกันได้เรื่อย ๆ เช่น filter แล้ว project แล้ว wrap ด้วย function เขียนจบในบรรทัดเดียว ซึ่งเทียบกับ jq หรือ JSONPath แล้ว JSONata มักอ่านง่ายกว่าสำหรับงาน transformation ที่ซับซ้อน เพราะมี object construction ในตัว

กรณีใช้งานจริง

จัดรูปแบบ response จาก API ก่อนนำไปใช้

API สมัยใหม่มักตอบกลับมาเป็น JSON ที่มี metadata ห่อหุ้มอยู่รอบข้อมูลจริง เช่น status, pagination, requestId ทำให้ข้อมูลที่ต้องการจริง ๆ ฝังอยู่ลึก ด้วย JSONata คุณหยิบเฉพาะส่วนที่ต้องการออกมาเป็นโครงสร้างใหม่ได้ทันที

data.orders[status = "paid"].{
  "id": id,
  "customer": customer.email,
  "total": $string(total) & " THB"
}

ลองนิพจน์พวกนี้ใน JSONata Tester กับ response จริงก่อน แล้วค่อยยกไปใช้ใน backend หรือ middleware ของคุณ

รวมข้อมูลทำรายงาน

เวลาทำรายงานสรุป มักต้องการตัวเลขรวม เฉลี่ย หรือนับกลุ่ม แทนที่จะเขียน reducer ใน JavaScript JSONata ทำได้ในนิพจน์เดียว

{
  "totalRevenue": $sum(orders.total),
  "averageOrder": $average(orders.total),
  "uniqueCustomers": $count($distinct(orders.customer.email))
}

เหมาะกับการเช็คยอดขาย สรุป log การใช้งาน หรือสร้างตัวเลขสำหรับ dashboard เบื้องต้น

กรองและทำความสะอาด log

ไฟล์ log ในรูปแบบ JSON มักมีข้อมูลเยอะจนกลบสิ่งที่สนใจ คุณใช้ filter หยิบเฉพาะ record ที่มีระดับ severity สูง แล้ว project ออกมาเฉพาะฟิลด์ที่จำเป็น

logs[level >= 3].{"time": timestamp, "message": message}

ผลลัพธ์ที่ได้คือรายการสั้น ๆ ที่อ่านง่าย เอาไปส่งต่อให้ทีม หรือใช้ค้นหา pattern ของปัญหาได้เร็วกว่าการเลื่อนดู log ดิบ

ฝึกก่อนเอาไปใช้ในโค้ดจริง

JSONata ถูกใช้ใน platform จำพวก integration และ serverless workflow มากมาย การมี playground ที่รันด้วยเอนจินอย่างการแบบนี้ ทำให้คุณทดลอง edge case ได้ปลอดภัย เช่น ถ้าฟิลด์เป็น null หรือ array ว่าง ผลลัพธ์จะออกมาอย่างไร ค้นพบพฤติกรรมแปลก ๆ ใน browser ก่อนที่มันจะกลายเป็น bug ใน production

แนวทางปฏิบัติที่ดี

• เริ่มจากนิพจน์ง่ายแล้วค่อยต่อยอด เริ่มจาก path พื้นฐานให้ได้ข้อมูลถูกก่อน แล้วค่อยเพิ่ม filter และ object construction ทีละชั้น เห็นจุดที่พังได้เร็วกว่า
• ใช้ตัวอย่างในตัวเป็นจุดตั้งต้น โหลดตัวอย่างที่ใกล้เคียงกับงานของคุณ แล้วแก้ไขต่อ จะเร็วกว่าเขียนจากศูนย์
• อ่านประเภท error ให้ครบ ถ้าเป็น parse error ให้ตรวจ JSON ต้นทางก่อน เช่น จุดลอยตัวหรือ comma เกิน ถ้าเป็น runtime error ค่อยแก้นิพจน์
• ทดสอบกับข้อมูลจริงหลายรูปแบบ ลองทั้งกรณีปกติ กรณี array ว่าง และกรณีฟิลด์หาย เพื่อให้มั่นใจว่านิพจน์ทนทานพอสำหรับ production
• ตั้งชื่อผลลัพธ์ให้สื่อความหมาย เวลาสร้าง object ใหม่ ใช้ key ที่อธิบายเนื้อหาชัด ๆ เช่น totalRevenue จะช่วยคนอ่านโค้ดภายหลังได้มาก
• เก็บนิพจน์ที่ใช้บ่อยไว้เป็นคลัง นิพจน์ JSONata ที่เขียนแล้วใช้ซ้ำได้ทุกที่ที่มีเอนจิน JSONata คลังเล็ก ๆ ของตัวเองจะคุ้มค่ามากในระยะยาว

พร้อมลองแล้วหรือยัง เปิด JSONata Tester วาง JSON ของคุณ แล้วรันคิวรีแรกภายในไม่กี่วินาที ไม่มีค่าใช้จ่าย ไม่ต้องสมัครอะไรทั้งสิ้น

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

ถ้าคุณทำงานกับ JSON บ่อย เครื่องมือเหล่านี้ช่วยต่อยอด workflow ได้อีก เริ่มจาก JSON Formatter สำหรับจัดรูปแบบและตรวจสอบความถูกต้องของ JSON ก่อนนำไปคิวรี ใช้ JSON Path Finder เพื่อค้นหาเส้นทางไปยังค่าที่ซ่อนอยู่ในโครงสร้างซับซ้อน และถ้าต้องแปลงผลลัพธ์เป็น config ที่อ่านง่าย JSON to YAML Converter พร้อมใช้ในคลิกเดียว

ขอให้สนุกกับการคิวรี!

คำถามที่พบบ่อย

ถ: JSONata Tester ต้องติดตั้งอะไรหรือสมัครสมาชิกก่อนใช้ไหม?

ตอบ: ไม่ต้องเลย เครื่องมือนี้ทำงานในเบราว์เซอร์ 100% เปิดหน้าเว็บแล้วใช้ได้ทันที ไม่มีค่าใช้จ่าย ไม่ต้องสมัครสมาชิก

ถ: ข้อมูล JSON ที่ผมวางลงไปถูกส่งไปเซิร์ฟเวอร์ไหม?

ตอบ: ไม่ เพราะทั้งการ parse JSON และการรันนิพจน์เกิดขึ้นฝั่ง client ทั้งหมด ข้อมูลของคุณไม่ออกจาก browser จึงปลอดภัยแม้เป็นข้อมูลจริงจาก production

ถ: JSONata ต่างจาก jq และ JSONPath อย่างไร?

ตอบ: ทั้งสามตัวใช้คิวรีข้อมูล JSON ได้ แต่ JSONata มาพร้อม object construction และ built-in functions ในตัว เช่น $sum และ $join ทำ transformation ที่ซับซ้อนได้ในนิพจน์เดียว อีกทั้งได้แรงบันดาลใจจาก XPath ทำให้คนที่เคยใช้ XPath ในโลก XML จะคุ้นมือเร็ว

ถ: parse error กับ runtime error ต่างกันอย่างไร ควรแก้ยังไง?

ตอบ: parse error หมายถึง JSON ต้นทางของคุณมีรูปแบบไม่ถูกต้อง เช่น ขาดเครื่องหมายคำพูดหรือมี comma เกิน ให้แก้ที่ JSON ก่อน ส่วน runtime error คือ JSON ผ่านแล้วแต่นิพจน์คิวรีมีปัญหาตอนรัน ให้กลับไปตรวจนิพจน์ เครื่องมือแยกสองกรณีนี้ให้ชัดเจนเพื่อให้คุณรู้ว่าต้องแก้ฝั่งไหน

ถ: นิพจน์ที่ทดสอบแล้วเวิร์ก เอาไปใช้ที่อื่นได้จริงไหม?

ตอบ: ได้ เพราะเครื่องมือใช้เอนจิน JSONata อย่างการ นิพจน์ที่รันผ่านที่นี่จะให้ผลเดียวกันเมื่อนำไปใช้กับไลบรารี JSONata ใน Node.js หรือ platform อื่น ๆ ที่รองรับ JSONata