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 三欄的表格。Alice 的 tags 儲存格內容是 admin; editor,Bob 的則是空白。

小提示

  • 要呈現 API 回應時,直接貼上完整的回應。如果它長得像 {"items": [...]},會自動從 items 取出各列。
  • 如果想在轉換前先檢查或修正 JSON,可以先用 JSON 格式化工具。

常見問題

› 需要什麼樣的 JSON 結構?

最適合的是物件陣列,每個物件一列。只有一個陣列屬性的物件,例如 {"data": [...]},也能辨識。其他任何值都會成為單獨一列。

› 巢狀物件和陣列怎麼處理?

巢狀欄位會變成以點號連接的欄名,例如 address.city。由簡單值組成的陣列會用 "; " 連接,物件陣列則會產生帶索引的路徑,例如 items.0.name。

› 如果各個物件的鍵不一樣怎麼辦?

欄位是所有鍵的聯集,依第一次出現的順序排列。缺少的值會留空。

› 輸出可以直接放到網頁上嗎?

可以。文字會經過 HTML 跳脫,所以像 <script> 這樣的值只會顯示為文字。