แปลง JSON เป็น Query String: คู่มือฉบับสมบูรณ์

นักพัฒนาเว็บทุกคนเคยเจองานน่าเบื่อแบบเดียวกัน: มี JSON object เต็มไปด้วย parameters แล้วต้องแปลงเป็น URL query string ที่ encode ถูกต้อง พร้อมรักษา nested keys และ arrays ให้ครบถ้วน การทำมือล้วน ๆ คือสูตรของบั๊ก — ลืม separator & เว้นวรรคไม่ได้ encode วงเล็บกลับด้าน หรือค่าใน array หายไปเงียบ ๆ จน API call พัง JSON to Query String Converter ทำให้งานนี้เหลือแค่กด paste วาง JSON ลงไป แล้วรับ query string ที่พร้อมใช้งานจริงกลับมา

เครื่องมือนี้ทำงานได้สองทาง แปลง JSON object เป็น query string เพื่อสร้าง API request หรือ paste query string ที่มีอยู่แล้วเพื่อรับ JSON ที่ format สวยงามกลับมา — เหมาะมากสำหรับ debug URL ยาว ๆ ที่ service ภายนอกส่งมาให้ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ 100% payload, token และ API parameter ภายในจะไม่ออกจากเครื่องของคุณเลย

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

ทำไมต้องใช้ JSON to Query String Converter?

• Percent-encoding ถูกต้องทุกครั้ง — เครื่องมือส่ง key และ value ทุกตัวผ่าน encodeURIComponent ช่องว่างกลายเป็น %20 วงเล็บกลายเป็น %5B/%5D และตัวอักษร Unicode ถูก encode อย่างปลอดภัย ไม่ต้องเดาอีกต่อไปว่าตัวอักษรไหน URL-safe
• รองรับ nested object — JSON ที่ซ้อนลึกอย่าง {"filters": {"status": "active"}} แปลงเป็น filters[status]=active ด้วย bracket notation (ค่า default) หรือ filters.status=active แบบ dot notation — สลับได้ด้วย toggle เดียว
• จัดการ array อย่างถูกต้อง — ค่าใน array แปลงเป็น repeated keys (tags=dev&tags=json) หรือ bracket notation (tags[]=dev&tags[]=json) ตาม convention ที่ backend ของคุณใช้
• แปลงสองทาง — paste query string แล้วเครื่องมือ parse กลับเป็น JSON โดยรวม repeated keys เป็น array และ decode ค่าที่ percent-encode ไว้ — ช่วยชีวิตตอน debug URL
• ข้อมูลไม่รั่วไหล — การแปลงทั้งหมดทำฝั่ง client ในเบราว์เซอร์ของคุณ payload ที่ sensitive ไม่แตะ server ไหนเลย สำคัญมากเมื่อทำงานกับ internal API หรือ endpoint ที่ต้อง auth
• Copy และ download ในตัว — คลิกเดียว copy ผลลัพธ์ไป clipboard หรือดาวน์โหลดเป็น querystring.txt / query.json ไปใช้ใน test suite หรือ documentation

ฟีเจอร์เด่น

มีรายละเอียดที่น่าเน้นอีกสามจุด การแปลงกลับรักษา fidelity — parser ตั้งใจเก็บค่าเป็น string โดยไม่ coerce ตัวเลขหรือ boolean ดังนั้น round-trip แบบ JSON → query → JSON จะได้สิ่งที่เริ่มต้นไว้กลับมาเป๊ะ ๆ ตัวเลือก skip-nulls มีประโยชน์กับ API parameter ที่ optional — แทนที่จะส่ง referrer=null ไป ทั้ง key จะหายไปจาก query string เลย และปุ่มโหลดตัวอย่างเติม input ด้วย JSON ที่มี nested object และ array ให้เห็น convention ทำงานจริงทันที

วิธีใช้งาน

1. เปิด JSON to Query String Converter — ไม่ต้องสมัคร ไม่ต้องติดตั้ง ใช้ได้กับเบราว์เซอร์สมัยใหม่ทุกตัว
2. เลือกทิศทางด้วย tab switcher: "JSON → Query String" หรือ "Query String → JSON"
3. Paste JSON object (หรือ query string) ลงช่อง input หรือกดปุ่ม example เพื่อโหลดตัวอย่างที่มี nested object และ array
4. ตั้งค่า options: dot notation สำหรับ key ซ้อน, repeated keys สำหรับ array และจะ skip null/undefined หรือไม่
5. Copy ผลลัพธ์ไป clipboard หรือดาวน์โหลดเป็นไฟล์ไปใช้ใน test, docs หรือ Postman collection

เข้าใจ Query String Encoding

query string ดูเหมือนง่าย แต่ convention ในการ represent ข้อมูลมีโครงสร้างข้างในนั้นแตกต่างกันไปในแต่ละ ecosystem การรู้ว่า backend ของคุณพูดภาษาไหนคือความต่างระหว่าง parameter ที่ parse ได้กับ parameter ที่มาถึงเป็นขยะ

Percent-encoding คือรากฐาน มีเพียงชุดตัวอักษรเล็ก ๆ ที่ URL-safe ที่เหลือทั้งหมด — ช่องว่าง ตัวอักษร non-ASCII ", {, }, [, ] — ต้อง encode เป็น %XX hex JavaScript ของ encodeURIComponent encode ทุกอย่างยกเว้น A-Z, a-z, 0-9, -, _, ., !, ~, *, ', (, ) นั่นคือเหตุผลที่ filters[status] ใน value โผล่มาเป็น filters%5Bstatus%5D เครื่องมือนี้ apply encoding ให้ทุก key และ value อัตโนมัติ

Bracket notation (a[b][c]=1) คือ convention หลักสำหรับโครงสร้างที่ซ้อนกัน เป็นภาษาที่ PHP ($_GET), Rails (Rack::Utils.parse_nested_query) และ library qs ยอดนิยมของ Node.js เข้าใจโดยกำเนิด ถ้า backend ของคุณคือ Laravel, Express ที่ใช้ qs (default ใน Express 4+), Spring Boot หรือ Django bracket notation เกือบจะเป็นคำตอบที่ถูกเสมอ:

{
  "user": { "name": "Ana", "role": "admin" },
  "page": 2
}

user[name]=Ana&user[role]=admin&page=2

Dot notation (a.b.c=1) พบได้น้อยกว่าฝั่ง server แต่ปรากฏในบาง API และระบบ logging มันอ่านเหมือน property path มากกว่า ทำให้ popular ในระบบ feature-flag และ configuration key แบบ flat เปิด toggle นี้เมื่อฝั่ง consume คาดหวัง key สไตล์ path:

user.name=Ana&user.role=admin&page=2

Arrays มี encoding ยอดนิยมสองแบบ Repeated keys (tags=dev&tags=json) คือรูปแบบคลาสสิกที่ server framework แทบทุกตัวเข้าใจ — PHP, Express, Flask และ Go รวม duplicate เป็น list หมด Bracket-suffix keys (tags[]=dev&tags[]=json) โผล่มาจาก PHP และ Rails / qs ก็ parse ได้ แต่อาจทำ framework ที่ไม่คาดคิดวงเล็บเปล่าสับสน เมื่อไม่แน่ใจ repeated keys คือตัวเลือกที่ปลอดภัยกว่าและ portable กว่า

มีความซับซ้อนหนึ่งจุดที่เครื่องมือนี้จัดการถูกต้อง: ตอนแปลงกลับ ค่าอย่าง page=2 จะกลับมาเป็น string "2" ไม่ใช่ตัวเลข 2 นั่นตั้งใจ — query string ไม่มีข้อมูล type ฝังอยู่ และการ coerce type จะทำให้ round-trip เพี้ยน ให้ parse และ validate type ที่ฝั่ง consume เอง

use case ในทางปฏิบัติ

สร้างและทดสอบ API request

REST API มักต้องการ filter parameter ที่ซับซ้อนใน URL สมมติคุณกำลังทดสอบ endpoint ที่รับ pagination, sorting และ filters:

{
  "page": 2,
  "per_page": 25,
  "sort": "-created_at",
  "filters": { "status": "active", "tier": "premium" }
}

paste ลงตัวแปลงแล้วได้ทันที:

page=2&per_page=25&sort=-created_at&filters[status]=active&filters[tier]=premium

ต่อท้าย endpoint URL ของคุณ ยิง request แล้วคุณกำลังทดสอบอยู่แล้วในไม่กี่วินาที แทนที่จะประกอบ string มือ

แชร์ state ของแอปผ่าน URL

data table, dashboard และหน้า search มีประโยชน์กว่ามากเมื่อ state อยู่ใน URL — ผู้ใช้ bookmark, แชร์ และ refresh ได้โดยไม่เสีย state เดิม serialize filter state เป็น JSON แปลงเป็น query string แล้ว push เข้า URL ด้วย History API พอหน้าโหลด แปลงกลับเป็น state object การออกแบบสองทางของเครื่องมือนี้ให้คุณ prototype ทั้งสองทิศทางก่อนเขียนโค้ดแอปสักบรรทัด

debug และ logging HTTP calls

log line หรือ bug report ให้ URL ยักษ์แบบ search?q=user%20management&facets%5B%5D=docs&facets%5B%5D=api&debug=true มา paste เข้าโหมด reverse แล้วคุณได้ JSON ที่อ่านออก โชว์ parameter ที่เข้ามาแน่ ๆ — decoded, มีโครงสร้าง และคิดตามง่าย มีประโยชน์มากตอน review webhook callback หรือ OAuth redirect URL ด้วย

ทำงานกับ frontend↔backend contract

เมื่อทีม frontend และ backend ตกลงเรื่อง request parameter ตัวอย่างที่แชร์กันช่วยทั้งสองฝั่ง ตัวแปลงเปลี่ยนตัวอย่าง JSON จาก API docs เป็น query string ที่ frontend ควรสร้าง — และกลับกัน เพราะการ encode เป็น deterministic ทั้งสองทีมตรวจ implementation ของตัวเองกับ output เดียวกันได้

Best Practices

• encode ทุกครั้งเสมอ — อย่า concat ข้อมูล user เข้า URL ด้วยมือเด็ดขาด ให้ encodeURIComponent (หรือเครื่องมือนี้) จัดการ — ตัวอักษร &, =, # ที่ไม่ encode จะ corrupt parameter ของคุณแบบเงียบ ๆ
• ระวังความยาว URL — เบราว์เซอร์จัดการ ~2,000 ตัวอักษรได้ปลอดภัย บาง server ปัด URL ที่ยาวเกิน 4,000–8,000 ตัวอักษร ถ้า JSON ใหญ่ ลองพิจารณา POST กับ JSON body แทน query string
• อย่าใส่ข้อมูล sensitive ใน query string — URL ถูก log โดย server, proxy, เบราว์เซอร์ และเครื่องมือ analytics หมด token, รหัสผ่าน และข้อมูลส่วนตัวควรอยู่ใน header หรือ request body — ไม่ใช่ใน ?api_key=...
• เลือก repeated keys ดีกว่า comma-joined — tags=dev&tags=json ชัดเจนไม่กำกวมและ framework ทุกตัว parse ได้เอง tags=dev,json ต้อง split เองและพังทันทีที่ value มี comma
• validate และ coerce type ฝั่ง server — query string ไม่มีข้อมูล type ทุกอย่างมาถึงเป็น string แปลง "2" เป็น integer และ validate ค่า enum ที่ฝั่ง consume ก่อนใช้เสมอ
• round-trip เพื่อ verify — แปลง JSON → query string → JSON แล้วเทียบกัน ถ้ามีอะไรเปลี่ยน แสดงว่า setting ของ notation ไม่ตรงกับที่ parser คาดหวัง

เริ่มแปลง JSON เป็น Query String วันนี้

การเขียน query string มือเป็นปัญหาที่แก้ได้แล้ว — เลิกทำเถอะ paste JSON ของคุณลง JSON to Query String Converter เลือก notation แล้วรับ URL ที่ encode ถูกต้องในหลักมิลลิวินาที เพราะทำงานในเบราว์เซอร์ล้วน ๆ จึงปลอดภัยกับ payload ภายใน ใช้ได้ทันที พร้อม copy และ download สำหรับทุกสิ่งถัดไป

เครื่องมือที่เกี่ยวข้อง

• URL Encoder — encode หรือ decode string เดี่ยว ๆ ตอนที่แค่ต้องการ escape ค่าเดียว
• URL Parser — แยก URL เต็มเป็นส่วน scheme, host, path และ query
• JSON to YAML Converter — แปลง JSON เป็น YAML สำหรับ config file และ CI pipeline

ขอให้สนุกกับการแปลงข้อมูล!