รวม JSON

คำแนะนำที่เกี่ยวข้อง

JSON Merge (การรวม JSON) คืออะไร?

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

• รวม API response จากหลาย microservice เป็นโครงสร้าง JSON เดียวสำหรับใช้งานฟรอนต์เอนด์
• รวมไฟล์คอนฟิกหลายชั้น base / dev / prod สร้างคอนฟิกสุดท้ายตามการครอบคลุมของสภาพแวดล้อม
• รวมไฟล์แปล i18n หลายไฟล์ตามภาษา กำจัดรายการซ้ำ และเติมเต็มให้เป็นพจนานุกรมที่สมบูรณ์
• รวมอาร์เรย์ mock data หลายชุดหรือ API response แบบแบ่งหน้าหลายรายการเป็นชุดข้อมูลที่สมบูรณ์
• รวมคอนฟิกเริ่มต้นของคอมโพเนนต์ฟรอนต์เอนด์ + คอนฟิกที่ผู้ใช้กำหนดเอง + คอนฟิก A/B experiment จากระยะไกล
• รวมไฟล์ส่งออก JSON จากระบบต้นทางหลายระบบในการย้ายข้อมูล ให้เป็นรูปแบบเดียวสำหรับระบบปลายทาง

วิธีการใช้งาน

1. วาง JSON 2 ถึง N ส่วนที่ต้องการรวมตามลำดับลงในช่องป้อนค่าทางด้านซ้าย (ค่าเริ่มต้นมี 2 ช่อง) หรือคลิก「+」เพื่อเพิ่มช่องป้อนค่าเพิ่มเติม
2. เลือกกลยุทธ์การรวมในดรอปดาวน์ของแถบเครื่องมือ: Deep Merge (เชิงลึก) / Shallow Merge (ตื้น) / Array Concat (ต่ออาร์เรย์) / Array Replace (แทนที่อาร์เรย์)
3. คลิกปุ่ม「รวม」 ช่องผลลัพธ์ทางด้านขวาจะแสดงผลลัพธ์ที่จัดรูปแบบหลังจากรวม; หากข้อมูลที่ป้อนมีข้อผิดพลาดทางไวยากรณ์จะแสดงหมายเลขบรรทัดและข้อความแสดงข้อผิดพลาดโดยละเอียด
4. หลังจากยืนยันว่าผลลัพธ์ถูกต้องแล้ว คลิก「คัดลอก」เพื่อวางผลลัพธ์การรวมลงในคลิปบอร์ด หรือคลิก「ดาวน์โหลด」เพื่อบันทึกเป็นไฟล์ merged.json เพื่อดำเนินการต่อ เช่น จัดรูปแบบ ตรวจสอบ Schema ฯลฯ

คุณสมบัติ

• กลยุทธ์การรวม 4 แบบ: Deep Merge / Shallow Merge / Array Concat / Array Replace สลับได้ในคลิกเดียวเพื่อตอบสนองสถานการณ์ธุรกิจที่แตกต่างกัน
• รองรับ JSON 2 ถึง N ส่วน: มีช่องป้อนค่า 2 ช่องโดยค่าเริ่มต้น สามารถกด「+」เพื่อเพิ่ม JSON ต้นทางเพิ่มเติมแบบไดนามิก ยืดหยุ่นสำหรับการรวมหลายแหล่ง
• Deep Merge แบบ recursive: จัดการออบเจกต์ที่ซ้อนกันหลายชั้นอย่างชาญฉลาด จัดการคอนฟลิกต์ที่ leaf node ตามกลยุทธ์ที่กำหนด คงฟิลด์ที่ถูกต้องทั้งหมดไว้
• แก้ไขคอนฟลิกต์อย่างยืดหยุ่น: คอนฟลิกต์ระดับบนสุดดำเนินการตามกลยุทธ์ที่เลือก; คอนฟลิกต์ออบเจกต์ที่ซ้อนกันจะเข้าสู่การรวมระดับลึก; คอนฟลิกต์อาร์เรย์จัดการแยกตาม arrayConcat/arrayReplace
• ผลลัพธ์จัดรูปแบบเป็นหนึ่งเดียว: ผลลัพธ์การรวมแสดงด้วยการเยื้อง 2 ช่องว่าง สะดวกสำหรับการตรวจสอบด้วยตนเองและคัดลอกไปยังเครื่องมือถัดไปโดยตรง
• รวมแบบเรียลไทม์: วางเสร็จแล้วคลิก「รวม」จะได้ผลลัพธ์ทันที หากมีข้อผิดพลาดจะแสดงหมายเลขบรรทัด JSON และข้อความแสดงข้อผิดพลาดโดยละเอียด
• ประมวลผลในเครื่องเพื่อความเป็นส่วนตัว: การแยกวิเคราะห์ การรวม และการจัดรูปแบบทั้งหมดเสร็จสิ้นในเบราว์เซอร์แบบโลคัล เนื้อหาที่ป้อนจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ใดๆ
• เชื่อมต่อกับเครื่องมือถัดไปอย่างไร้รอยต่อ: ผลลัพธ์การรวมสามารถคัดลอกไปยังเครื่องมือจัดรูปแบบ JSON ตรวจสอบ Schema สร้างโค้ด ฯลฯ เพื่อดำเนินการต่อในคลิกเดียว

ตัวอย่างโค้ด

// npm install lodash.merge
import merge from 'lodash.merge';

const a = { user: { name: 'Alice', age: 28 }, tags: ['admin'] };
const b = { user: { email: 'a@x.com', age: 29 }, tags: ['editor'] };

// Deep Merge: ออบเจกต์ที่ซ้อนกันถูกรวมแบบ recursive, leaf node ค่าที่ป้อนทีหลังทับค่าก่อนหน้า
const deep = merge({}, a, b);
console.log(deep);
// => { user: { name: 'Alice', age: 29, email: 'a@x.com' }, tags: ['admin', 'editor'] }

// Shallow Merge: คีย์ระดับบนสุดทับทั้งบล็อก ไม่ลงไปในระดับที่ซ้อนกัน
const shallow = Object.assign({}, a, b);
console.log(shallow);
// => { user: { email: 'a@x.com', age: 29 }, tags: ['editor'] }

# pip install mergedeep
from mergedeep import merge

a = {"user": {"name": "Alice", "age": 28}, "tags": ["admin"]}
b = {"user": {"email": "a@x.com", "age": 29}, "tags": ["editor"]}

# Deep Merge
result = merge(a, b)
print(result)
# => {'user': {'name': 'Alice', 'age': 29, 'email': 'a@x.com'}, 'tags': ['admin', 'editor']}

# หมายเหตุ: mergedeep ค่าเริ่มต้นจะรวมอาร์เรย์ สตริง/ตัวเลขจะถูกทับ
# หากต้องการทับอาร์เรย์ ให้เพิ่ม strategy='override'

# รวมอาร์เรย์ JSON หลายชุดเป็นอาร์เรย์ยาวหนึ่งเดียว
jq -s 'add' a.json b.json c.json

# รวมออบเจกต์ JSON หลายรายการแบบ recursive (jq 1.6+)
jq -s 'reduce .[] as $item ({}; . * $item)' a.json b.json

# Shallow Merge: ทับคีย์ระดับบนสุดของ b ลงบน a
jq -s '.[0] * .[1]' a.json b.json

# หลังจากรวมอาร์เรย์ คงไว้เฉพาะฟิลด์ id ที่ไม่ซ้ำกัน
jq -s '[.[].items[]] | unique_by(.id)' a.json b.json

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

การแก้ไขปัญหา

อภิธานศัพท์

JSON Merge

การดำเนินการที่รวมออบเจกต์ JSON ตั้งแต่สองรายการขึ้นไปเป็นออบเจกต์ใหม่ตามกฎที่กำหนด จุดสำคัญที่สุดคือ "กลยุทธ์การแก้ไขเมื่อชื่อคีย์ชนกัน"

Deep Merge / การรวมเชิงลึก

กลยุทธ์ที่ลง recursive เข้าไปในออบเจกต์ที่ซ้อนกันและรวมแต่ละ leaf node แยกกัน; เมื่อทั้งสองข้างเป็น plain object จะทำ recursive มิฉะนั้นจะทับค่า

Shallow Merge / การรวมตื้น

กลยุทธ์ที่รวมเฉพาะคีย์ระดับบนสุด คีย์ที่ชื่อซ้ำกันจะถูกทับทั้งบล็อก; ใน JS เทียบเท่ากับ `Object.assign({}, a, b)`

Array Concat / การต่ออาร์เรย์

กลยุทธ์การรวมอาร์เรย์แบบหนึ่ง: รวมอาร์เรย์หลายชุดเป็นอาร์เรย์ยาวหนึ่งเดียวโดยคงลำดับองค์ประกอบทั้งหมด; มักใช้สำหรับการรวม API response

Array Replace / การแทนที่อาร์เรย์

กลยุทธ์การรวมอาร์เรย์แบบหนึ่ง: อาร์เรย์ที่ชื่อซ้ำกันจะถูกทับทั้งบล็อกด้วยค่าที่ป้อนทีหลัง; มักใช้สำหรับการครอบคลุมคอนฟิก

Object.assign

เมธอดในตัวของ JavaScript ที่คัดลอก enumerable own properties ทั้งหมดจากออบเจกต์ต้นทางตั้งแต่หนึ่งรายการขึ้นไปไปยังออบเจกต์เป้าหมายแบบ shallow copy; เป็นการนำไปใช้มาตรฐานของการรวมตื้น

lodash.merge

ฟังก์ชัน Deep Merge ที่ให้มาโดยไลบรารี Lodash เป็นการนำไปใช้ deep merge ที่ใช้กันมากที่สุดในระบบนิเวศ Node.js; อาร์เรย์จะถูกรวมกันแทนที่จะถูกทับ

mergedeep (Python)

ไลบรารี Deep Merge ในระบบนิเวศ Python ติดตั้งด้วย pip install mergedeep; รองรับพารามิเตอร์ strategy เพื่อควบคุมพฤติกรรมการรวม/การทับอาร์เรย์

jq -s 'add'

คำสั่ง jq สำหรับรวมอาร์เรย์ JSON หลายชุดเป็นอาร์เรย์เดียว; การรวมออบเจกต์ JSON หลายรายการต้องใช้ `reduce .[] as $item ({}; . * $item)`

BFF (Backend for Frontend)

ชั้นการรวมที่อยู่ระหว่างฟรอนต์เอนด์และแบ็กเอนด์เซอร์วิสในสถาปัตยกรรมไมโครเซอร์วิส; มักต้องรวม JSON response จากหลายเซอร์วิสเป็น response เดียว เป็นสถานการณ์คลาสสิกของ JSON Merge

เปรียบเทียบกลยุทธ์การรวม JSON 4 แบบ

ตารางเปรียบเทียบการนำไปใช้รวม JSON ที่พบบ่อย

Authoritative References

• MDNObject.assign - เอกสาร MDN Web
• LodashLodash _.merge เอกสารทางการ
• jqคู่มือทางการ jq - reduce และ add
• IETFข้อมูลจำเพาะทางการ JSON (RFC 8259)