DevToolPal
ไทย

แปลง JSON เป็นตาราง HTML

แปลงอาร์เรย์ของออบเจกต์ JSON เป็นตาราง HTML โดยแตกฟิลด์ที่ซ้อนกันเป็นคอลัมน์แบบมีจุด

ทำงานในเครื่อง ไม่มีการอัปโหลด

ตัวเลือก

อินพุต

0 ตัวอักษร · 0 B

เอาต์พุต

0 ตัวอักษร · 0 B

ทำอะไรได้

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

วิธีใช้งาน

  1. วาง JSON ลงในช่อง อินพุต อัปโหลดไฟล์ .json หรือคลิก ตัวอย่าง
  2. มาร์กอัปตารางจะแสดงทางขวาขณะที่คุณพิมพ์ JSON ที่ไม่ถูกต้องจะถูกแจ้งพร้อมตำแหน่ง
  3. ปิด รวมแถวหัวตาราง หากต้องการเฉพาะแถวข้อมูล
  4. คัดลอก HTML หรือดาวน์โหลดเป็นไฟล์ .html

ตัวอย่าง

[
  { "name": "Alice", "address": { "city": "Shanghai" }, "tags": ["admin", "editor"] },
  { "name": "Bob", "address": { "city": "Beijing" } }
]

จะได้ตารางที่มีคอลัมน์ name, address.city และ tags เซลล์ tags ของ Alice คือ admin; editor ส่วนของ Bob ว่างเปล่า

เคล็ดลับ

  • หากต้องการแสดงการตอบกลับจาก API ให้วางการตอบกลับทั้งหมด หากมีหน้าตาแบบ {"items": [...]} แถวจะถูกดึงมาจาก items โดยอัตโนมัติ
  • ใช้ตัวจัดรูปแบบ JSON ก่อน หากต้องการตรวจหรือแก้ JSON ก่อนแปลง

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

› ต้องใช้ JSON โครงสร้างแบบไหน?

อาร์เรย์ของออบเจกต์ให้ผลดีที่สุด หนึ่งออบเจกต์ต่อหนึ่งแถว ออบเจกต์ที่มีพร็อพเพอร์ตีอาร์เรย์เพียงตัวเดียว เช่น {"data": [...]} ก็เข้าใจได้เช่นกัน ค่าอื่น ๆ จะกลายเป็นแถวเดียว

› ออบเจกต์และอาร์เรย์ที่ซ้อนกันจัดการอย่างไร?

ฟิลด์ที่ซ้อนกันจะกลายเป็นชื่อคอลัมน์แบบมีจุด เช่น address.city อาร์เรย์ของค่าธรรมดาจะถูกต่อกันด้วย "; " และอาร์เรย์ของออบเจกต์จะได้ path แบบมีดัชนี เช่น items.0.name

› ถ้าออบเจกต์มีคีย์ไม่เหมือนกันล่ะ?

คอลัมน์คือคีย์ทั้งหมดรวมกันตามลำดับที่พบครั้งแรก ค่าที่ขาดหายจะเว้นว่างไว้

› เอาต์พุตปลอดภัยสำหรับใส่ในหน้าเว็บหรือไม่?

ปลอดภัย ข้อความถูก escape แบบ HTML ค่าอย่าง <script> จึงแสดงเป็นข้อความ