2025-02-26-常見的 4 種方式來「查看 JSON 結構」

通常我們會「看 API 的文件」來了解資料結構，但除了這個方法，其實還有很多實用方式可以快速看懂或驗證 JSON 資料的結構，尤其是你在寫前端程式時。

---

✅ 常見的 4 種方式來「查看 JSON 結構」

---

① 用 console.log() 搭配 DevTools 手動展開

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(data) // 展開來看 JSON 結構
  })

📌 優點：最直觀、直接點開每一層
📌 缺點：要自己展開、適合資料量不太大的情況

---

② 使用 console.dir() 可以更好展開物件樹

console.dir(data, { depth: null })

📌 類似 console.log，但對於巢狀物件會展開得更清楚

---

③ 用 JSON.stringify() 印出完整結構

console.log(JSON.stringify(data, null, 2))

📌 會印出「整包 JSON 字串」，好複製、好貼
📌 可以貼進 JSON formatter 工具裡看（如下）

---

④ 貼到「JSON 結構檢視工具」中

🔧 推薦免費線上工具：

• https://jsonviewer.stack.hu/
• https://jsonformatter.org/
• https://codebeautify.org/jsonviewer

只要把 JSON.stringify(data) 貼進去，就能像樹狀圖一樣展開來看。

---

補充：查看 API 文件

如果是政府或大型平台提供的 API，通常都會有：

• 欄位說明（field name）
• 資料結構示範（JSON schema 或 sample JSON）
• 文件範例（Swagger 或 Postman）

例如：
中央氣象局 API 文件就寫得很清楚 →
氣象開放資料平台 API 文件

---

🧠 建議初學者這樣做：

1. 先用 console.log(data) 看整體有幾層
2. 再用 console.log(data.records) 或 console.log(data.records.location) 一層層拆
3. 如果不確定陣列還是物件，可用 Array.isArray(x)、或 typeof x 確認

---