Day17：JSON 與資料格式處理

2025 iThome 鐵人賽

DAY 13

Modern Web

Modern Web：從基礎、框架到前端學習系列第 17 篇

17th鐵人賽

zoeeyee

2025-10-01 00:49:45

37 瀏覽

分享至

學習目標

了解 JSON 是什麼，以及為什麼它是前端最常用的資料格式。
學會在 JavaScript 中解析 (parse) 與序列化 (stringify) JSON。
學會如何操作 JSON 物件與陣列。
做一個小型聯絡人清單 (JSON → DOM 渲染)。

理論講解

1.JSON 是什麼？

JavaScript Object Notation，輕量級資料交換格式。
幾乎所有程式語言都支援。
常用於API 傳輸、資料儲存。

範例：

{
  "name": "小明",
  "age": 22,
  "email": "ming@example.com",
  "skills": ["HTML", "CSS", "JavaScript"]
}

2.在 JavaScript 中處理 JSON

// JSON 字串
let jsonString = '{"name": "小明", "age": 22}';

// 解析 (Parse) → JSON 字串轉為 JS 物件
let obj = JSON.parse(jsonString);
console.log(obj.name); // 小明

// 序列化 (Stringify) → JS 物件轉為 JSON 字串
let newJson = JSON.stringify(obj);
console.log(newJson); // {"name":"小明","age":22}

3.JSON 常見結構

**物件 (Object)**→ { "key": "value" }
**陣列 (Array)**→ [{}, {}, {}]

實作練習：聯絡人清單

檔名：day17_json.html

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day17 - JSON 與資料處理</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    .card {
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 10px;
    }
    .card h3 {
      margin: 0;
      color: darkblue;
    }
  </style>
</head>
<body>
  <h1>聯絡人清單</h1>
  <div id="contactList"></div>

  <script>
    // JSON 陣列
    const contactsJSON = `[
      { "name": "小明", "age": 22, "email": "ming@example.com" },
      { "name": "小美", "age": 25, "email": "mei@example.com" },
      { "name": "小華", "age": 20, "email": "hua@example.com" }
    ]`;

    // 解析 JSON
    const contacts = JSON.parse(contactsJSON);

    // 把資料顯示在網頁上
    const contactList = document.getElementById("contactList");

    contacts.forEach(contact => {
      const card = document.createElement("div");
      card.className = "card";
      card.innerHTML = `
        <h3>${contact.name}</h3>
        <p>年齡：${contact.age}</p>
        <p>Email：${contact.email}</p>
      `;
      contactList.appendChild(card);
    });
  </script>
</body>
</html>