跳至正文

理解JSON資料格式 📦

在學習API的過程中,你經常會聽到JSON這個詞。JSON是程式之間交換資料時使用的格式。讓我用簡單的方式來解釋!

用日常生活比喻JSON?​

讓我們把JSON比作快遞包裹標籤吧?

📦 快遞包裹
┌──────────────────┐
│ 收件人: 王小明      │
│ 地址: 台北市大安區  │
│ 電話: 0912-345-678 │
│ 物品: 書           │
└──────────────────┘

用JSON來寫這些資訊:

{
  "收件人": "王小明",
  "地址": "台北市大安區",
  "電話": "0912-345-678",
  "物品": "書"
}

JSON的正式名稱​

JSON = JavaScript Object Notation

意思是「JavaScript物件表示法」,但可以在所有程式語言中使用!

JSON的基本規則​

1. 用花括號 包裹​

{
  "名稱": "值"
}

2. 使用雙引號 " "​

{
  "姓名": "王小明"
}

3. 用冒號 : 連接名稱和值​

{
  "年齡": 25
}

4. 用逗號 , 分隔多個資訊​

{
  "姓名": "王小明",
  "年齡": 25,
  "職業": "開發者"
}

JSON資料型別​

JSON中可以使用的值:

1. 字串 (String) ""​

{
  "姓名": "王小明",
  "城市": "台北"
}

2. 數字 (Number)​

{
  "年齡": 25,
  "身高": 175.5,
  "溫度": -5
}

3. 布林值 (Boolean)​

{
  "註冊完成": true,
  "信箱驗證": false
}

4. 陣列 (Array) [ ]​

儲存多個項目時使用:

{
  "興趣": ["閱讀", "電影", "程式設計"],
  "分數": [90, 85, 95]
}

5. 物件 (Object) ​

將資訊分組時:

{
  "使用者": {
    "姓名": "王小明",
    "年齡": 25
  }
}

6. null​

沒有值時:

{
  "中間名": null
}

透過實際例子理解​

例1: 使用者資訊 👤​

{
  "姓名": "王小明",
  "年齡": 25,
  "信箱": "wang@example.com",
  "會員": true,
  "地址": {
    "城市": "台北",
    "區": "大安區"
  },
  "興趣": ["閱讀", "看電影", "寫程式"]
}

例2: 商城商品 🛍️​

{
  "商品名": "筆記型電腦",
  "價格": 35000,
  "庫存": 5,
  "促銷中": true,
  "顏色": ["銀色", "灰色", "黑色"],
  "規格": {
    "CPU": "i7",
    "RAM": "16GB",
    "儲存": "512GB SSD"
  }
}

例3: 天氣資訊 ☀️​

{
  "城市": "台北",
  "溫度": 23,
  "天氣": "晴",
  "濕度": 60,
  "降雨機率": 0,
  "週預報": [
    {"星期": "一", "溫度": 22},
    {"星期": "二", "溫度": 24},
    {"星期": "三", "溫度": 25}
  ]
}

理解JSON陣列​

儲存多個資料時使用方括號 [ ]:

簡單陣列​

["蘋果", "香蕉", "橙子"]

物件陣列​

[
  {
    "姓名": "王小明",
    "年齡": 25
  },
  {
    "姓名": "李大華",
    "年齡": 30
  },
  {
    "姓名": "陳美玲",
    "年齡": 28
  }
]

如何閱讀JSON​

{
  "學生": {
    "姓名": "王小明",
    "分數": [90, 85, 95],
    "通過": true
  }
}

這樣讀:

  • 「有學生資訊」
  • 「裡面的姓名是王小明」
  • 「分數是90、85、95」
  • 「通過是true(真)」

JSON vs 其他格式​

JSON vs CSV​

CSV (像Excel的表格格式):

姓名,年齡,城市
王小明,25,台北
李大華,30,台中

JSON:

[
  {"姓名": "王小明", "年齡": 25, "城市": "台北"},
  {"姓名": "李大華", "年齡": 30, "城市": "台中"}
]

JSON的優點:

  • 可以表達複雜結構
  • 輕鬆表達巢狀資料
  • 作為API標準使用

實戰應用範例​

API回應範例​

向GitHub API請求使用者資訊時:

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  "location": "San Francisco",
  "public_repos": 344,
  "followers": 1000000,
  "following": 0
}

組態檔範例​

用JSON編寫程式組態:

{
  "應用名稱": "我的網站",
  "版本": "1.0.0",
  "資料庫": {
    "主機": "localhost",
    "埠": 3306,
    "使用者": "admin"
  },
  "功能": {
    "深色模式": true,
    "通知": true,
    "自動儲存": false
  }
}

使用JSON工具​

用我們網站的工具來處理JSON吧!

1. 格式化JSON​

JSON Formatter - 讓複雜的JSON更易讀!

2. 探索JSON資料​

JSON Path Tester - 從JSON中查找所需資料

3. 將JSON轉換為其他格式​

常見錯誤和解決方法​

❌ 錯誤1: 忘記逗號​

{
  "姓名": "王小明"
  "年齡": 25
}

✅ 正確方法:​

{
  "姓名": "王小明",
  "年齡": 25
}

❌ 錯誤2: 最後加上逗號​

{
  "姓名": "王小明",
  "年齡": 25,
}

✅ 正確方法:​

{
  "姓名": "王小明",
  "年齡": 25
}

❌ 錯誤3: 使用單引號​

{
  '姓名': '王小明'
}

✅ 正確方法:​

{
  "姓名": "王小明"
}

❌ 錯誤4: 寫註解​

{
  // 這是註解
  "姓名": "王小明"
}

JSON中不能寫註解! ❌

JSON的使用場景​

1. API通訊 🌐​

大多數Web API都用JSON交換資料。

// API請求
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))

2. 組態檔 ⚙️​

  • package.json (Node.js)
  • tsconfig.json (TypeScript)
  • settings.json (VS Code)

3. 資料儲存 💾​

NoSQL資料庫(MongoDB等)以JSON格式儲存資料。

4. 資料交換 📤📥​

伺服器和客戶端交換資料時。

常見問題 (FAQ)​

Q1: JSON是程式語言嗎?​

A: 不是!JSON是資料格式。只是表示資料的一種方式。

Q2: JSON只在JavaScript中使用嗎?​

A: 不是!幾乎所有程式語言都可以使用。

  • Python
  • Java
  • C++
  • PHP
  • Ruby 等等!

Q3: JSON和XML的區別是?​

A: XML是以前常用的格式。JSON更簡單、更易讀,所以現在更多使用JSON。

XML:

<user>
  <name>王小明</name>
  <age>25</age>
</user>

JSON:

{
  "name": "王小明",
  "age": 25
}

Q4: JSON檔案副檔名是?​

A: 是 .json。

data.json
config.json
users.json

JSON驗證​

要檢查JSON是否格式正確:

  1. 使用 JSON Formatter
  2. 使用線上JSON驗證工具
  3. 在瀏覽器開發者工具中檢查

練習: 自己建立JSON​

用JSON建立你自己的資訊:

{
  "姓名": "你的姓名",
  "年齡": 你的年齡,
  "居住地": "你的城市",
  "興趣": [
    "興趣1",
    "興趣2",
    "興趣3"
  ],
  "學生": true,
  "介紹": {
    "喜歡的食物": "...",
    "喜歡的顏色": "..."
  }
}
提示

貼到 JSON Formatter 並點擊「Format」按鈕! 會整理得很漂亮,還能檢查語法錯誤。

下一步 🚀​

如果你理解了JSON:

  1. ✅ JSON Formatter - 格式化JSON
  2. ✅ JSON Path Tester - 搜尋JSON資料
  3. ✅ API Tester - 測試使用JSON的API
  4. ✅ JSON to TypeScript - 將JSON轉換為程式碼

總結​

JSON不難!是整理資料的方法之一。

要記住的要點:

  • { } 用花括號開始和結束
  • " " 使用雙引號
  • : 用冒號連接名稱和值
  • , 用逗號分隔項目
  • 最後一項後面沒有逗號

現在你能讀寫JSON了嗎? 🎉

如果要學習API和Web開發,JSON是必不可少的。經常看的話很快就會習慣!