itsytools.
คู่มือทั้งหมด

จัดรูปแบบและตรวจสอบ JSON

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

เขียนโดย ItsyTools · วันที่ตรวจทาน:

ลองใช้ตัวอย่างที่ให้มา

ดาวน์โหลด order-options.json ซึ่งเป็นคำสั่งซื้อสมมติที่มีสินค้าสองรายการและชื่อฟิลด์เป็นภาษาอังกฤษ ออบเจ็กต์ customer รวมชื่อกับเมืองไว้ด้วยกัน ส่วนอาร์เรย์ items มี CARD-02 ตามด้วย BOX-01 ตัวอย่างมีข้อความในเครื่องหมายคำพูด จำนวนและราคาที่เป็นตัวเลข ค่าบูลีน true และ null สำหรับหมายเหตุการจัดส่งที่ว่างอยู่ ฟิลด์จงใจไม่เรียงลำดับเพื่อให้เห็นผลของตัวเลือกการเรียง

order-options.json

ขั้นตอนการใช้งาน

เครื่องมือจัดรูปแบบและตรวจสอบ JSON
  1. เปิด เครื่องมือจัดรูปแบบและตรวจสอบ JSON ใช้ ไฟล์ เพื่อเปิด order-options.json ที่ให้มา หรือวางเนื้อหาของไฟล์ใน ค่าที่ป้อน
  2. ตั้ง การเยื้อง เป็น 2 เพื่อใช้ช่องว่างสองช่องต่อระดับ ในการทำงานครั้งแรก อย่าเลือก เรียงคีย์ของออบเจ็กต์
  3. เลือก ประมวลผลข้อมูล เครื่องมือจะตรวจสอบไวยากรณ์ JSON ก่อนแสดงผล หากแจ้งข้อผิดพลาด ให้ใช้หมายเลขบรรทัดและคอลัมน์ค้นหาปัญหา แก้ไขข้อมูลนำเข้า แล้วลองอีกครั้ง
  4. อ่านผลลัพธ์ ออบเจ็กต์ customer และสินค้าสองรายการควรอ่านเข้าใจง่าย โดยมีหนึ่งฟิลด์หรือหนึ่งรายการต่อบรรทัด ฟิลด์จะคงลำดับของตัวอย่างไว้เมื่อไม่ได้เลือกการเรียง
  5. เลือก ดาวน์โหลดผลลัพธ์ เพื่อบันทึก formatted.json หรือใช้ คัดลอกข้อความ เพื่อนำผลลัพธ์ไปไว้ในโปรแกรมแก้ไขอื่น
  6. เปิดไฟล์ที่ดาวน์โหลดในโปรแกรมแก้ไขข้อความและเปรียบเทียบกับตัวอย่างตามรายการตรวจสอบด้านล่าง จากนั้นลองตัวเลือกการเยื้องและการเรียงแบบอื่น โดยเลือก ประมวลผลข้อมูล อีกครั้งหลังเปลี่ยนแต่ละค่า

ตัวอย่างก่อนและหลัง

ตัวอย่างสั้นเหล่านี้ใช้ออบเจ็กต์ customer จาก order-options.json โดยแสดงเป็นเอกสาร JSON ขนาดเล็ก เปรียบเทียบชื่อและเมืองเดียวกันก่อนและหลังใช้แต่ละการตั้งค่า ส่วนอ้างอิงที่เลือกอ่านได้ท้ายคู่มือจะแสดงคำสั่งซื้อทั้งหมด

ทำให้ JSON แบบกระชับอ่านง่ายขึ้น

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

ก่อน: ข้อมูลนำเข้าแบบกระชับ

{"customer":{"name":"Zoë","city":"Bergen"}}

หลัง: เยื้องด้วยช่องว่างสองช่อง

{
  "customer": {
    "name": "Zoë",
    "city": "Bergen"
  }
}

เรียงคีย์ภายในออบเจ็กต์

คง การเยื้อง ไว้ที่ 2 เลือก เรียงคีย์ของออบเจ็กต์ แล้วเลือก ประมวลผลข้อมูล ภายใน customer ตอนนี้ city อยู่ก่อน name ค่าทั้งสองยังเหมือนเดิม

ก่อน: ลำดับคีย์เดิม

{
  "customer": {
    "name": "Zoë",
    "city": "Bergen"
  }
}

หลัง: คีย์ของออบเจ็กต์ที่เรียงแล้ว

{
  "customer": {
    "city": "Bergen",
    "name": "Zoë"
  }
}

ทำให้ JSON กระชับ

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

ก่อน: เยื้องด้วยช่องว่างสองช่อง

{
  "customer": {
    "name": "Zoë",
    "city": "Bergen"
  }
}

หลัง: ย่อขนาด

{"customer":{"name":"Zoë","city":"Bergen"}}

เลือกการเยื้อง

ตัวเลือกการทำงาน
2ใช้ช่องว่างสองช่องต่อระดับการซ้อน เป็นการตั้งค่าที่ใช้ในขั้นตอนหลัก
4ใช้ช่องว่างสี่ช่องต่อระดับการซ้อน ทำให้ออบเจ็กต์และอาร์เรย์ที่ซ้อนอยู่เด่นชัดขึ้น
↹ใช้แท็บหนึ่งตัวต่อระดับการซ้อน ความกว้างที่เห็นของแท็บขึ้นอยู่กับโปรแกรมแก้ไขข้อความ
ย่อขนาดลบช่องว่างที่ใช้จัดรูปแบบและการขึ้นบรรทัดใหม่ ช่องว่างภายในข้อความที่อยู่ในเครื่องหมายคำพูดยังคงเป็นส่วนหนึ่งของข้อความ เลือกตัวเลือกนี้เพื่อให้ผลลัพธ์กระชับ แล้วเลือก ประมวลผลข้อมูล

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

เรียงคีย์ของออบเจ็กต์

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

  1. คง การเยื้อง ไว้ที่ 2 เลือก เรียงคีย์ของออบเจ็กต์ แล้วเลือก ประมวลผลข้อมูล
  2. คีย์ระดับบนสุดจะเรียงเป็น customer, deliveryNote, items, order และ paid ภายใน customer จะมี city ก่อน name ส่วนในสินค้าแต่ละรายการ price จะอยู่ก่อน quantity และ sku
  3. อาร์เรย์ items ยังคงมี CARD-02 ตามด้วย BOX-01 การเรียงคีย์ไม่ได้เรียงสินค้าตาม sku หรือราคา

คัดลอก ดาวน์โหลด และเริ่มใหม่

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

ตรวจสอบ JSON ที่ดาวน์โหลด

  • เปิด formatted.json ในโปรแกรมแก้ไขข้อความ ตรวจสอบว่าคำสั่งซื้อคือ ORD-1042 ลูกค้าคือ Zoë ใน Bergen และมีสินค้าสองรายการ
  • ตรวจสอบค่าและชนิดข้อมูล: quantity เป็นตัวเลข 2 แล้วตามด้วย 1 ราคายังคงเป็น 19.50 และ 5.00 ค่า paid เป็นบูลีน true ที่ไม่มีเครื่องหมายคำพูด และ deliveryNote เป็น null ที่ไม่มีเครื่องหมายคำพูด ชื่อและรหัสสินค้าที่อยู่ในเครื่องหมายคำพูดยังคงเป็นสตริง
  • หลังลอง เรียงคีย์ของออบเจ็กต์ ให้ตรวจสอบลำดับฟิลด์ตามที่อธิบายข้างต้น และยืนยันว่า CARD-02 ยังอยู่ก่อน BOX-01 ในอาร์เรย์ items
  • ลอง ย่อขนาด และ ประมวลผลข้อมูล วางผลลัพธ์กลับใน ค่าที่ป้อน ตั้ง การเยื้อง เป็น 2 แล้วเลือก ประมวลผลข้อมูล อีกครั้ง เปรียบเทียบค่าและลำดับสินค้ากับตัวอย่างเดิม ตัวเลือกการจัดรูปแบบควรคงข้อมูลเหล่านี้ไว้

คำถามและการแก้ปัญหา

ทำไมเครื่องมือแจ้งว่า JSON ไม่ถูกต้อง?

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

ใช้ความคิดเห็นหรือจุลภาคท้ายรายการได้ไหม?

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

คำเตือนคีย์ซ้ำหมายถึงอะไร?

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

ทำไมไฟล์เปิดไม่ได้หรือประมวลผลไม่ได้?

ขนาดข้อมูลนำเข้าสูงสุดคือ 2 MiB หรือ 2,097,152 ไบต์ ไฟล์ข้อความในเครื่องต้องเป็น UTF-8 หากเครื่องมือแจ้งว่าข้อมูลซับซ้อนเกินไป ให้ลดระดับการซ้อนหรือจำนวนรายการ แบ่งข้อมูลขนาดใหญ่เป็นเอกสาร JSON ที่เล็กลงและสมบูรณ์ ไม่ตัดกลางออบเจ็กต์หรืออาร์เรย์

ทำไมตัวเลขยาวเปลี่ยนไปในแอปอื่น?

ตัวอย่างความแม่นยำแยกต่างหากด้านล่างมี 9007199254740993 และ 0.10000000000000001 เครื่องมือจัดรูปแบบนี้คงข้อความตัวเลขไว้อย่างตรงตามต้นฉบับในทุกตัวเลือกการเยื้องและการเรียง จัดรูปแบบ exact-numbers.json แล้วเปรียบเทียบผลกับ exact-numbers-formatted.json ในโปรแกรมแก้ไขข้อความ แอปที่นำเข้าผลลัพธ์อาจยังปัดเศษตัวเลข จึงควรตรวจสอบว่ารองรับความแม่นยำที่ต้องการ รหัสที่มีศูนย์นำหน้า เช่น 00123 ต้องเป็นสตริงในเครื่องหมายคำพูดเมื่อใช้ใน JSON

exact-numbers.jsonexact-numbers-formatted.json

การจัดรูปแบบกู้คืนเลขที่ถูกปัดเศษไปแล้วได้ไหม?

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

ส่วนเสริม: เปรียบเทียบตัวอย่างและผลลัพธ์อ้างอิง

ตัวอย่างโค้ดและไฟล์ดาวน์โหลดเหล่านี้สร้างจาก order-options.json ด้วยเครื่องมือจัดรูปแบบเดียวกับหน้าเครื่องมือ ผลลัพธ์อ้างอิงแบบจัดรูปแบบและแบบกระชับปิดการเรียงคีย์ ส่วนแบบเรียงแล้วใช้การเยื้องด้วยช่องว่างสองช่องและเปิดการเรียง

ตัวอย่างต้นฉบับ

{"order":"ORD-1042", "customer": {"name":"Zoë","city":"Bergen"}, "items":[{"sku":"CARD-02", "quantity":2,"price":19.50},{"sku":"BOX-01","quantity":1, "price":5.00}], "paid":true, "deliveryNote":null}

ช่องว่างสองช่อง; ลำดับคีย์เดิม

{
  "order": "ORD-1042",
  "customer": {
    "name": "Zoë",
    "city": "Bergen"
  },
  "items": [
    {
      "sku": "CARD-02",
      "quantity": 2,
      "price": 19.50
    },
    {
      "sku": "BOX-01",
      "quantity": 1,
      "price": 5.00
    }
  ],
  "paid": true,
  "deliveryNote": null
}
order-formatted.json

ย่อขนาด; ลำดับคีย์เดิม

{"order":"ORD-1042","customer":{"name":"Zoë","city":"Bergen"},"items":[{"sku":"CARD-02","quantity":2,"price":19.50},{"sku":"BOX-01","quantity":1,"price":5.00}],"paid":true,"deliveryNote":null}
order-minified.json

ช่องว่างสองช่อง; คีย์ของออบเจ็กต์ที่เรียงแล้ว

{
  "customer": {
    "city": "Bergen",
    "name": "Zoë"
  },
  "deliveryNote": null,
  "items": [
    {
      "price": 19.50,
      "quantity": 2,
      "sku": "CARD-02"
    },
    {
      "price": 5.00,
      "quantity": 1,
      "sku": "BOX-01"
    }
  ],
  "order": "ORD-1042",
  "paid": true
}
order-sorted.json
ไฟล์อ้างอิงการตั้งค่าไบต์
order-formatted.jsonช่องว่างสองช่อง; ลำดับคีย์เดิม300
order-minified.jsonย่อขนาด; ลำดับคีย์เดิม193
order-sorted.jsonช่องว่างสองช่อง; คีย์ของออบเจ็กต์ที่เรียงแล้ว300

นี่คือผลลัพธ์ข้อความจริง ไม่ใช่ภาพหน้าจออินเทอร์เฟซ โค้ดอาจตัดบรรทัดให้พอดีกับหน้าจอ ชื่อไฟล์อ้างอิงใช้แยกแต่ละตัวอย่าง ส่วนเครื่องมือดาวน์โหลดทุกเวอร์ชันในชื่อ formatted.json

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

จัดรูปแบบ JSON โดยไม่ปัดเศษรหัสที่เป็นตัวเลขแปลง JSON และ YAML ด้วยชนิดข้อมูลที่ต้องการ

แหล่งข้อมูล

RFC 8259 · JSON