JSON Flattener: แปลง JSON ที่ซ้อนกันเป็น flat key และแปลงกลับได้ในคลิกเดียว
Flatten JSON ที่มีโครงสร้างซ้อนกันให้เป็น flat key แบบ dotted, underscored หรือ bracket notation และ unflatten กลับเป็น object เดิมด้วย JSON Flattener ออนไลน์ฟรี ทำงานฝั่ง client 100 เปอร์เซ็นต์
Table of Contents
JSON Flattener: แปลง JSON ที่ซ้อนกันเป็น flat key และแปลงกลับได้ในคลิกเดียว
JSON ในโลกจริงมักมีโครงสร้างซ้อนกันลึกหลายชั้น order หนึ่งใบมี customer, customer มี address และ address ก็มี city, postcode และเบอร์โทรศัพท์หลายเบอร์ การซ้อนกันแบบนี้ดีมากสำหรับ API แต่จะกลายเป็นอุปสรรคทันทีเมื่อระบบปลายทางรับข้อมูลได้ทีละค่าเท่านั้น ไม่ว่าจะเป็นคอลัมน์ใน spreadsheet, field ใน search index หรือ config key ในระบบ deployment นี่คือจุดที่ JSON Flattener เข้ามาแก้ปัญหา
flat key คือหัวใจของระบบที่อ่านการซ้อนกันไม่ได้ spreadsheet, search index และ config system ล้วนต้องการ key เดียวที่ชี้ไปยังค่าเดียว แทนที่จะส่งค่าที่ฝังอยู่ลึกสามชั้นให้ BI tool คุณจะส่งเป็นคู่ key-value เดียวที่ลงคอลัมน์ได้ทันที เครื่องมือนี้จะเดินไล่ทั้ง document รวมทุก path เป็น key เดียวที่อ่านได้ แล้วแปลงกลับ (unflatten) เป็นโครงสร้างเดิมได้อีกด้วย
เครื่องมือนี้ทำงานสองทิศทาง รองรับ key 3 รูปแบบ จัดการ array ได้ เลือก separator เองได้ และทำ type inference ตอนแปลงกลับ ที่สำคัญคือทำงานทั้งหมดในเบราว์เซอร์ ข้อมูลของคุณไม่ถูกส่งขึ้น server เลย
ทำไมต้องใช้ JSON Flattener?
- Spreadsheet ต้องการแถวแบบแบน: Excel และ Google Sheets จับคู่ flat key หนึ่งตัวกับคอลัมน์หนึ่งคอลัมน์ การ flatten เปลี่ยน document ที่ซ้อนกันให้เป็นแถวที่ import ได้ทันที
- Search index อยากได้ document แบบแบน: ระบบจัดเก็บแบบ document ส่วนใหญ่ index ค่า scalar ไว้ที่ระดับบนสุด flat key จึงแมปเข้า field ได้ตรงโดยไม่ต้องเขียน mapping script เอง
- แปลงสองทิศทาง: flatten JSON ที่ซ้อนกัน แล้ว unflatten กลับเพื่อได้โครงสร้างเดิมคืน เหมาะกับการทดสอบ round trip และ pipeline ที่ต้องการความแม่นยำ
- เลือกได้ 3 รูปแบบ key: ใช้ dotted key เพื่อความอ่านง่าย, underscored key สำหรับฐานข้อมูลและ identifier หรือ bracket notation เมื่อต้องการระบุตำแหน่ง array อย่างชัดเจน
- Type inference ตอนแปลงกลับ: ค่าที่เป็นข้อความอย่าง "36", "true" และ "null" จะถูกแปลงกลับเป็น number, boolean และ null ให้อัตโนมัติ
- เป็นส่วนตัวและรวดเร็ว: ทำงานฝั่ง client ทั้งหมด แปะ กด แล้ว copy ไม่ต้องสมัครบัญชี ไม่ต้องอัปโหลด
ฟีเจอร์หลัก
| ฟีเจอร์ | ทำอะไร |
|---|---|
| Dotted notation | เชื่อม path ด้วยจุด เช่น user.address.city |
| Underscored notation | เชื่อม path ด้วยขีดล่าง เช่น user_address_city |
| Bracket notation | ระบุ index ของ array ด้วยวงเล็บเหลี่ยม เช่น items[0].id |
| Unflatten | สร้าง object หรือ array ที่ซ้อนกันคืนจาก flat map |
| รองรับ array | เดินไล่ array ของ object และ scalar ได้ทุกระดับความลึก |
| Custom separator | กำหนดตัวคั่นเองได้เมื่อจุดหรือขีดล่างชนกับ key เดิม |
| Type inference | คืนค่า number, boolean และ null ตอน unflatten |
| ทำงานฝั่ง client | ประมวลผลทั้งหมดในเบราว์เซอร์ของคุณ |
จุดเด่นเพิ่มเติมจากตาราง:
- แปะ API response ที่ซ้อนกันลึกหรือ config ที่เขียนมือ แล้วได้ flat map ในคลิกเดียว
- ผลลัพธ์ copy ได้สะอาด และเครื่องมือทำงานออฟไลน์ได้เมื่อโหลดหน้าเว็บแล้ว
วิธีใช้งาน
- เปิด JSON Flattener ในเบราว์เซอร์
- แปะ JSON ที่ซ้อนกันลงในช่อง input (หรือแปะ flat map หากต้องการ unflatten แทน)
- เลือกรูปแบบ key — dotted, underscored หรือ bracket — และปรับ separator หาก key ของคุณมีจุดหรือขีดล่างอยู่แล้ว
- กด Flatten เพื่อได้ flat key map หรือกด Unflatten เพื่อสร้างโครงสร้างที่ซ้อนกันคืน
- Copy ผลลัพธ์ แล้วลองส่งกลับผ่านทิศทางตรงข้ามเป็นการทดสอบ round trip
Flat Key 3 รูปแบบ: dotted, underscored และ bracket
เริ่มจากตัวอย่าง JSON ที่ซ้อนกันนี้
{
"user": {
"name": "Ada",
"address": { "city": "London" }
},
"roles": ["admin", "editor"]
}
Dotted notation อ่านง่ายที่สุดและเป็นค่าเริ่มต้นที่แนะนำ ทุกชั้นของการซ้อนกันจะกลายเป็น segment คั่นด้วยจุดหนึ่งส่วน ทำให้โครงสร้างของ key สะท้อนโครงสร้างของ document ได้ตรงกัน
user.name = Ada user.address.city = London roles.0 = admin roles.1 = editor
Underscored notation เปลี่ยนจุดเป็นขีดล่าง (user_address_city) เป็นตัวเลือกที่ปลอดภัยที่สุดสำหรับฐานข้อมูล ชื่อคอลัมน์ และ search index field เพราะหลายระบบห้ามหรือตีความจุดใน identifier ผิด การใช้ขีดล่างจึงมักทำงานได้โดยไม่ต้อง escape
Bracket notation คงจุดไว้สำหรับ object แต่ระบุตำแหน่ง array อย่างชัดเจน (items[0].id) อ่านเหมือน path expression ในโค้ด ทำให้แยก "id ของ element แรก" ออกจาก "object ที่มี key ชื่อ 0 จริง ๆ" ได้ ซึ่งเป็นความกำกวมที่เกิดขึ้นได้จริงกับ dotted key ล้วน ๆ
ทิศทาง unflatten ปิดวงจรให้สมบูรณ์ จาก flat map ด้านบน เครื่องมือจะสร้าง object และ array เดิมคืนมา โดยมีสองเรื่องที่ควรรู้:
- Type inference: flat map เก็บทุกอย่างเป็นข้อความ ตอน unflatten "36" จะกลายเป็น number 36, "true" กลายเป็น boolean และ "null" กลายเป็น null ทำให้ round trip คืนทั้งโครงสร้างและชนิดข้อมูล
- การชนกันของ separator: ถ้า key เดิมมีตัวคั่นอยู่แล้ว document สองตัวที่ต่างกันอาจ flatten ออกมาเป็น key เดียวกัน เช่น {"a.b": 1} และ {"a": {"b": 1}} กลายเป็น a.b เหมือนกันทั้งคู่ ควรเลือก separator ที่ไม่มีทางปรากฏใน key ของคุณ
ตัวอย่างการใช้งานจริง
ส่งออกข้อมูลเข้า Spreadsheet
นักวิเคราะห์ไม่ได้อยากได้ความซ้อนกัน แต่อยากได้คอลัมน์ flatten record เป็นชุดแล้วทุก field ที่เคยซ้อนอยู่จะไปอยู่ในคอลัมน์ของตัวเองอย่างคาดเดาได้ การทำรายงานจาก API data ที่ซ้อนกันจึงใช้เวลาแค่สองนาที
Index ข้อมูลและ Bulk Import
pipeline สำหรับ index และรูปแบบ bulk import ส่วนใหญ่รับเฉพาะ document แบบแบนที่มีชื่อ field ไม่ซ้ำ flatten แต่ละ record ก่อนส่งเข้า index แล้ว settings.theme และ settings.notifications.email จะกลายเป็น field ระดับบนที่ query, facet และ boost ได้ทันที
ทำ Config แบบแบน
ระบบ environment variable และ platform deployment จำนวนมากรับเฉพาะ key แบบแบน flatten database.host และ database.port ให้เป็นคู่แบบ DATABASE_HOST ด้วย underscored separator จัดการเป็นลิสต์ง่าย ๆ แล้ว unflatten กลับเป็น nested config เมื่อแอปพลิเคชันต้องใช้
เทียบโครงสร้างที่ซ้อนกันลึก
การเทียบ document ใหญ่สองเวอร์ชันทีละบรรทัดเป็นเรื่องทรมาน flatten ทั้งสองเวอร์ชันแล้ว diff จะเหลือแค่การเทียบเป็น key ต่อ key path ที่เปลี่ยนชื่อ ค่าที่แก้ และ branch ที่เพิ่มหรือหายไปจะเห็นได้ชัดทันที และ flat key ยังง่ายต่อการ log และแนบไปกับ ticket อีกด้วย
แนวทางปฏิบัติที่ดี
- ระวัง key ชนกัน: ตรวจก่อนว่า key จริงในข้อมูลของคุณมีตัวคั่นที่เลือกไว้อยู่หรือไม่ ก่อนเชื่อผลลัพธ์ของการ flatten-unflatten
- เลือก separator ที่ไม่มีทางอยู่ใน key: ขีดล่างคู่ (__) หรืออักขระที่หายากช่วยให้การชนกันแทบเป็นไปไม่ได้ในข้อมูลจริง
- ทดสอบ round trip ทุก pipeline: flatten, unflatten แล้วเทียบกับต้นฉบับสักครั้งต่อหนึ่ง schema เพื่อยืนยันว่า notation และ separator ที่เลือกปลอดภัย
- dotted key สำหรับคน, underscored key สำหรับเครื่อง: ความอ่านง่ายสำคัญตอน review ส่วนอักขระที่ปลอดภัยกับ identifier สำคัญตอนจัดเก็บ
- คงรูปแบบ array ให้สม่ำเสมอ: bracket notation อธิบายตัวเองได้ดี แต่ถ้าระบบปลายทางต้องการ dotted key ล้วน ให้แปลงครั้งเดียวที่ขอบเขตระบบ
- จำไว้ว่าชนิดข้อมูลถูกอนุมาน: ถ้าค่านั้นเป็นข้อความ "36" จริง ๆ ให้วางกติกาการ quote หรือตัด field นั้นออกจาก round trip
เริ่ม Flatten Payload แรกของคุณวันนี้
หยิบ API response ที่ซ้อนกันจากงานล่าสุด เปิด JSON Flattener แล้ว flatten ในคลิกเดียว ลองสลับรูปแบบ key, unflatten กลับ แล้วจะเห็นทันทีว่า flat key ช่วยให้งานขั้นถัดไปง่ายขึ้นแค่ไหน ฟรี เป็นส่วนตัว และทำงานในเบราว์เซอร์ล้วน ๆ
Related Tools You Might Like:
- JSON Formatter — format, validate และ minify JSON ก่อนหรือหลังการ flatten
- CSV to JSON Converter — แปลงข้อมูลแบบตารางเป็น JSON พร้อมจัดโครงสร้างต่อ
- JSON to CSV Converter — ส่งออก record ที่ flatten แล้วเป็น CSV สำหรับ spreadsheet โดยตรง
เขียนโดยทีม Online Tools Forge — ผู้สร้างเครื่องมือสำหรับนักพัฒนาที่รวดเร็ว ฟรี และเน้นความเป็นส่วนตัว ทำงานทั้งหมดในเบราว์เซอร์ของคุณ
คำถามที่พบบ่อย
ถ: การ flatten ต่างจากการ format JSON อย่างไร?
ตอบ: การ format เปลี่ยนแค่ whitespace และ indentation โดยคงการซ้อนกันไว้ ส่วนการ flatten ปรับโครงสร้าง document เอง โดยเปลี่ยนทุก nested path ให้เป็นคู่ key-value เดียว ใช้ formatter เมื่ออยากอ่าน JSON และใช้ flattener เมื่อต้องส่งให้ระบบที่รับแบบแบน
ถ: การ flatten รองรับ array ที่อยู่ใน object หรือไม่?
ตอบ: รองรับครับ array ถูกเดินไล่เหมือน branch อื่น ๆ โดยแต่ละ element จะมี index ใน key เช่น items[0].id หรือ items.0.id หมายถึง element แรก และรองรับ array ซ้อนกันได้ทุกระดับความลึก
ถ: ถ้า key เดิมมีจุดหรือขีดล่างอยู่แล้วจะเกิดอะไรขึ้น?
ตอบ: โครงสร้างที่ต่างกันสองแบบอาจให้ flat key เดียวกัน และตอน unflatten จะถูกรวมเข้าด้วยกัน ควรเลือก separator ที่ไม่มีทางปรากฏใน key เช่น ขีดล่างคู่ และทดสอบ round trip เพื่อยืนยันว่าโครงสร้างไม่เพี้ยน
ถ: ข้อมูลของฉันถูกส่งไป server หรือไม่?
ตอบ: ไม่ เครื่องมือทำงานฝั่ง client ในเบราว์เซอร์ทั้งหมด JSON ของคุณไม่เคยออกจากเครื่อง จึงปลอดภัยกับ payload ที่อ่อนไหวและ config ภายในองค์กร