เครื่องมือเปรียบเทียบ JSON หรือที่มักเรียกว่าเครื่องมือ JSON diff ใช้เปรียบเทียบค่า JSON (JavaScript Object Notation) สองค่าและรายงานว่ามีอะไรเปลี่ยนแปลงระหว่างค่าเหล่านั้น โดยจะแสดงพร็อพเพอร์ตีและรายการในอาร์เรย์ทุกตัวที่ถูกเพิ่ม ลบ หรือแก้ไข พร้อมตำแหน่งที่แน่นอนในข้อมูล หน้านี้อธิบายวิธีทำงานของเครื่องมือเปรียบเทียบ JSON ของ whiz.tools พร้อมตัวอย่างที่ใช้ตรรกะการเปรียบเทียบจริง

การเปรียบเทียบ JSON คืออะไร?

การเปรียบเทียบ JSON คือกระบวนการตรวจสอบเอกสาร JSON สองฉบับเทียบกันเพื่อค้นหาความแตกต่าง เอกสาร JSON คือข้อความที่สร้างจากออบเจ็กต์ (คู่คีย์-ค่าในวงเล็บปีกกา) อาร์เรย์ (รายการที่มีลำดับในวงเล็บเหลี่ยม) และค่าพื้นฐาน เช่น สตริง ตัวเลข บูลีน และค่า null การเปรียบเทียบเอกสารสองฉบับด้วยตาเปล่าจะช้าและเกิดข้อผิดพลาดได้ง่ายเมื่อเอกสารยาวเกินไม่กี่บรรทัด ดังนั้นเครื่องมือเปรียบเทียบจึงจับคู่ข้อมูลโดยอัตโนมัติและเน้นการเปลี่ยนแปลงแต่ละรายการ

นักพัฒนาใช้การเปรียบเทียบลักษณะนี้เพื่อตรวจสอบการตอบกลับของ API ติดตามการเปลี่ยนแปลงในไฟล์การกำหนดค่า ตรวจสอบว่าการย้ายข้อมูลไม่ได้ทำให้ข้อมูลสูญหาย และทบทวนการเปลี่ยนแปลงไฟล์ JSON ในระบบควบคุมเวอร์ชัน

เครื่องมือเปรียบเทียบค่า JSON สองค่าอย่างไร

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

ค่าทั้งสองมีชนิดต่างกันหรือไม่ (เช่น ค่าหนึ่งเป็นออบเจ็กต์และอีกค่าหนึ่งเป็นตัวเลข) หรือค่าหนึ่งเป็น null ขณะที่อีกค่าหนึ่งไม่ใช่ หากใช่ เครื่องมือจะบันทึกว่าเกิดการแก้ไขที่จุดนั้นและหยุดเปรียบเทียบในระดับที่ลึกลงไป
ค่าทั้งสองเป็นค่าพื้นฐานหรือไม่ (สตริง ตัวเลข บูลีน หรือ null) หากใช่ เครื่องมือจะเปรียบเทียบค่าโดยตรง ความแตกต่างใด ๆ รวมถึงการเปลี่ยนจากตัวเลข 123 เป็นสตริง "123" จะถือเป็นการแก้ไข
ค่าทั้งสองเป็นออบเจ็กต์หรือเป็นอาร์เรย์ทั้งคู่หรือไม่ หากใช่ เครื่องมือจะเปรียบเทียบเนื้อหาตามกฎด้านล่าง และเปรียบเทียบซ้ำลงไปในออบเจ็กต์หรืออาร์เรย์ที่ซ้อนอยู่

ความแตกต่างทุกจุดจะถูกบันทึกพร้อมพาธ เช่น user.address.city หรือ tags[1] เพื่อให้ค้นหาในเอกสารต้นฉบับได้ง่าย สมาชิกของออบเจ็กต์จะเชื่อมด้วยจุด ส่วนรายการในอาร์เรย์จะแสดงดัชนีในวงเล็บเหลี่ยม ความแตกต่างที่อยู่บนสุดของเอกสาร เช่น อาร์เรย์ถูกแทนที่ด้วยออบเจ็กต์ จะไม่มีพาธภายในข้อมูล จึงกำกับด้วย $ ซึ่งเป็นตัวระบุรากที่กำหนดโดย RFC 9535 ซึ่งเป็นมาตรฐาน JSONPath และหมายถึงเอกสารทั้งฉบับ

การเปรียบเทียบออบเจ็กต์

สำหรับออบเจ็กต์ JSON สองตัว เครื่องมือรวบรวมคีย์ทุกตัวที่ปรากฏในออบเจ็กต์ใดออบเจ็กต์หนึ่ง แล้วดำเนินการกับแต่ละคีย์:

หากคีย์มีอยู่เฉพาะในออบเจ็กต์ที่สอง จะถือว่าเป็นพร็อพเพอร์ตีที่ เพิ่มเข้ามา
หากคีย์มีอยู่เฉพาะในออบเจ็กต์แรก จะถือว่าเป็นพร็อพเพอร์ตีที่ ถูกลบ
หากคีย์มีอยู่ในทั้งสองออบเจ็กต์ เครื่องมือจะเปรียบเทียบค่าทั้งสองแบบเรียกซ้ำ

ลำดับคีย์ไม่มีผล มาตรฐาน JSON ไม่ได้กำหนดลำดับของสมาชิกออบเจ็กต์ ดังนั้น {"a":1,"b":2} และ {"b":2,"a":1} จึงถือว่าเหมือนกัน

การเปรียบเทียบอาร์เรย์

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

นั่นหมายความว่าเครื่องมือจะไม่พยายามจับคู่รายการในอาร์เรย์ตามเนื้อหา เครื่องมือไม่รับรู้ว่าออบเจ็กต์ถูก “ย้าย” จากดัชนี 1 ไปยังดัชนี 2 แต่จะเห็นเพียงว่าค่าที่แต่ละดัชนีเปลี่ยนไป การลบหรือแทรกรายการตรงกลางอาร์เรย์จะทำให้รายการถัดไปทั้งหมดเลื่อนไปหนึ่งตำแหน่ง ดังนั้นโดยทั่วไปจึงแสดงเป็นการแก้ไขแยกกันหลายรายการ แทนที่จะเป็นการเพิ่มหรือลบเพียงครั้งเดียว

ตัวอย่างพร้อมวิธีทำ

ตัวอย่าง 1: การเปรียบเทียบออบเจ็กต์สองตัว

JSON แรก:

1{ "user": { "address": { "city": "New York", "zip": "10001" } } }
2

JSON ที่สอง:

1{ "user": { "address": { "city": "Boston", "zip": "02108" } } }
2

ผลลัพธ์:

แก้ไข user.address.city: "New York" → "Boston"
แก้ไข user.address.zip: "10001" → "02108"

ตัวอย่าง 2: การเปลี่ยนแปลงอาร์เรย์ที่ส่วนท้าย

JSON แรก:

1{ "tags": ["important", "urgent", "review"] }
2

JSON ที่สอง:

1{ "tags": ["important", "critical", "review", "documentation"] }
2

ดัชนี 0 ไม่เปลี่ยนแปลง ดัชนี 1 เปลี่ยนแปลง ดัชนี 2 ไม่เปลี่ยนแปลง และดัชนี 3 มีอยู่เฉพาะในอาร์เรย์ที่สอง ผลลัพธ์:

แก้ไข tags[1]: "urgent" → "critical"
เพิ่ม tags[3]: "documentation"

ตัวอย่าง 3: การลบรายการออกจากกลางอาร์เรย์

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

JSON แรก:

1{
2  "products": [
3    { "id": 1, "name": "Laptop", "price": 999.99 },
4    { "id": 2, "name": "Mouse", "price": 24.99 },
5    { "id": 3, "name": "Keyboard", "price": 59.99 }
6  ]
7}
8

JSON ที่สอง โดยลบรายการ “Mouse” และเพิ่มรายการ “Monitor” ที่ท้ายอาร์เรย์

1{
2  "products": [
3    { "id": 1, "name": "Laptop", "price": 899.99 },
4    { "id": 3, "name": "Keyboard", "price": 59.99 },
5    { "id": 4, "name": "Monitor", "price": 349.99 }
6  ]
7}
8

ผู้ที่ดูข้อมูลนี้อาจกล่าวว่า “Mouse ถูกลบ และ Monitor ถูกเพิ่ม” แต่เนื่องจากเครื่องมือเปรียบเทียบตามดัชนีอย่างเคร่งครัด จึงไม่ได้มองเช่นนั้น เครื่องมือเปรียบเทียบดัชนี 0 กับดัชนี 0 ดัชนี 1 กับดัชนี 1 และดัชนี 2 กับดัชนี 2 ดังนั้นทุกฟิลด์หลังรายการที่ถูกลบจึงถูกจับคู่กับออบเจ็กต์ผิดตัว ผลลัพธ์จริงคือการแก้ไขเจ็ดรายการ

แก้ไข products[0].price: 999.99 → 899.99
แก้ไข products[1].id: 2 → 3
แก้ไข products[1].name: "Mouse" → "Keyboard"
แก้ไข products[1].price: 24.99 → 59.99
แก้ไข products[2].id: 3 → 4
แก้ไข products[2].name: "Keyboard" → "Monitor"
แก้ไข products[2].price: 59.99 → 349.99

หากต้องการผลลัพธ์ที่อ่านง่ายขึ้นเมื่อเปรียบเทียบรายการลักษณะนี้ ให้จัดเรียงหรือกำหนดคีย์ให้อาร์เรย์ทั้งสองเหมือนกันก่อนนำมาวาง เช่น เขียนรายการทั้งสองให้อยู่ในลำดับเดียวกัน หรือจับคู่ออบเจ็กต์ด้วยฟิลด์ ID ก่อนเปรียบเทียบ

สิ่งที่เครื่องมือนี้ไม่ทำ

เครื่องมือไม่จับคู่รายการในอาร์เรย์ตามเนื้อหา ดังที่แสดงข้างต้น เครื่องมือจะเปรียบเทียบตามตำแหน่งดัชนีเท่านั้น จึงไม่สามารถระบุได้ว่ารายการถูกย้าย ไม่ใช่ถูกเปลี่ยนแปลง
เครื่องมือไม่ตรวจหาการอ้างอิงแบบวงกลม ในทางปฏิบัติ นี่ไม่ใช่ข้อจำกัด เพราะอินพุตทั้งสองมาจาก JSON.parse ซึ่งสร้างโครงสร้างต้นไม้แบบพื้นฐานเสมอ และไม่สามารถสร้างค่าที่อ้างอิงกลับมายังตัวเองได้ การอ้างอิงแบบวนรอบไม่สามารถมีอยู่ในข้อความ JSON ที่ถูกต้องตั้งแต่แรก
เครื่องมือไม่มีการตั้งค่าให้จัดเรียงอาร์เรย์ก่อนเปรียบเทียบ การจัดเรียงรายการในอินพุตใหม่ก่อนนำมาวางเป็นวิธีเดียวที่จะหลีกเลี่ยงผลจากการเลื่อนดัชนีที่อธิบายไว้ข้างต้น

วิธีใช้เครื่องมือ

วางเอกสาร JSON แรกในช่องด้านซ้าย และเอกสารที่สองในช่องด้านขวา
เครื่องมือจะเปรียบเทียบโดยอัตโนมัติเมื่อทั้งสองช่องมีข้อความ หรือคลิก Compare เพื่อเรียกใช้การเปรียบเทียบด้วยตนเอง
อ่านรายการผลลัพธ์ แต่ละบรรทัดจะแสดงพาธ เช่น user.age และระบุว่าเป็นรายการที่เพิ่ม ลบ หรือแก้ไข พร้อมแสดงค่าเดิมและค่าใหม่ไว้เคียงข้างกัน
คลิก Copy เพื่อคัดลอกผลลัพธ์เป็นข้อความธรรมดา

หากช่องใดมีข้อความที่ไม่ใช่ JSON ที่ถูกต้อง เครื่องมือจะแสดงข้อผิดพลาดใต้ช่องนั้นแทนการเปรียบเทียบ หากทั้งสองช่องไม่ถูกต้อง ข้อผิดพลาดของทั้งสองช่องจะแสดงพร้อมกัน

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

อะไรถือเป็นความแตกต่างระหว่างค่า JSON สองค่า พร็อพเพอร์ตีหรือรายการในอาร์เรย์จะแตกต่างกัน หากมีอยู่ในเอกสารเพียงฉบับเดียว หรือมีอยู่ในทั้งสองฉบับแต่เก็บค่าหรือชนิดที่แตกต่างกัน การเปลี่ยนค่าจากตัวเลข 5 เป็นสตริง "5" ถือเป็นการแก้ไข แม้ค่าทั้งสองอาจดูคล้ายกัน

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

พาธผลลัพธ์ $ หมายถึงอะไร หมายความว่าเอกสารทั้งฉบับเปลี่ยนแปลง ไม่ใช่เพียงส่วนใดส่วนหนึ่ง เหตุการณ์นี้เกิดขึ้นเมื่ออินพุตทั้งสองมีชนิดของค่าในระดับบนสุดต่างกัน เช่น ฝั่งหนึ่งเป็นอาร์เรย์และอีกฝั่งเป็นออบเจ็กต์ หรือเป็นตัวเลขธรรมดา 1 และ 2 $ คือตัวระบุรากจาก RFC 9535 ซึ่งเป็นมาตรฐาน JSONPath

ข้อมูล JSON ของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่ ไม่ การเปรียบเทียบทำงานในเบราว์เซอร์โดยใช้ JavaScript ไม่มีการอัปโหลดข้อมูลใด ๆ

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

เครื่องมือเปรียบเทียบ JSON ที่มีคอมเมนต์หรือจุลภาคต่อท้ายได้หรือไม่ ไม่ได้ JSON มาตรฐานตามที่กำหนดใน RFC 8259 ไม่อนุญาตให้มีคอมเมนต์หรือจุลภาคต่อท้าย อินพุตที่มีสิ่งเหล่านี้จะถูกปฏิเสธว่าไม่ถูกต้อง

เอกสารอ้างอิง

IETF. “รูปแบบการแลกเปลี่ยนข้อมูล JavaScript Object Notation (JSON)” RFC 8259, ธันวาคม 2017
IETF. “JSON Patch ของ JavaScript Object Notation (JSON)” RFC 6902, เมษายน 2013
IETF. “JSONPath: นิพจน์ค้นหาสำหรับ JSON” RFC 9535, กุมภาพันธ์ 2024 (หัวข้อ 2.2 กำหนดตัวระบุราก $)
Mozilla Developer Network. “JSON.parse()”

เครื่องมือเปรียบเทียบ JSON - เปรียบเทียบ JSON ออนไลน์ฟรี | JSON Diff