JavaScript 遍歷 Map 並填入表格 td：for...in、Object.entries、jQuery 實作

後端返回資料結構

// Map 序列化為 JSON 物件
{
  "name": "張三",
  "age": 25,
  "email": "zhang@example.com",
  "phone": "13800000000"
}

前端 HTML 表格

<table id="dataTable">
  <tr><th>欄位</th><th>值</th></tr>
  <tr><td>姓名</td><td id="tdName"></td></tr>
  <tr><td>年齡</td><td id="tdAge"></td></tr>
  <tr><td>Email</td><td id="tdEmail"></td></tr>
  <tr><td>電話</td><td id="tdPhone"></td></tr>
</table>

原生 JS 遍歷並填入（ES6+ 推薦）

fetch('/api/user/1')
  .then(r => r.json())
  .then(map => {
    // 方法 1: Object.entries (鍵值對陣列)
    for (const [key, value] of Object.entries(map)) {
      const td = document.getElementById('td' + capitalize(key));
      if (td) td.textContent = value;
    }
    // 方法 2: for...in (需檢查 hasOwnProperty)
    for (const key in map) {
      if (map.hasOwnProperty(key)) {
        const td = document.getElementById('td' + capitalize(key));
        if (td) td.textContent = map[key];
      }
    }
  });

function capitalize(s) { return s.charAt(0).toUpperCase() + s.slice(1); }

jQuery 版（專案已引用 jQuery 時）

$.getJSON('/api/user/1', function(map) {
  $.each(map, function(key, value) {
    $('#td' + key.charAt(0).toUpperCase() + key.slice(1)).text(value);
  });
});

若需每個 td 都是連結

for (const [key, value] of Object.entries(map)) {
  const td = document.getElementById('td' + capitalize(key));
  if (td) {
    const a = document.createElement('a');
    a.href = '/detail?field=' + encodeURIComponent(key) + '&value=' + encodeURIComponent(value);
    a.textContent = value;
    td.innerHTML = ''; // 清空
    td.appendChild(a);
  }
}

常見坑點

1. Map 鍵名與 td id 命名不一致：建立明確映射表 {name:'tdName', age:'tdAge', ...}，避免依賴首字母大寫規則。
2. 資料為陣列而非物件：[{key:'name',val:'張三'}, ...] 需用 forEach 遍歷。
3. 重複填入導致內容疊加：每次填入前 td.innerHTML = '' 或 td.textContent = '' 清空。
4. 非同步渲染時機：確保 DOM 就緒（DOMContentLoaded 或放在 fetch .then 內）。

最佳實踐：資料與視圖分離

// 定義欄位配置（單一來源）
const fields = [
  {key: 'name', label: '姓名', id: 'tdName', link: true},
  {key: 'age', label: '年齡', id: 'tdAge', link: false},
  {key: 'email', label: 'Email', id: 'tdEmail', link: true},
  {key: 'phone', label: '電話', id: 'tdPhone', link: false}
];

function render(map) {
  fields.forEach(f => {
    const td = document.getElementById(f.id);
    if (!td) return;
    const val = map[f.key] ?? '';
    if (f.link) {
      const a = document.createElement('a');
      a.href = `/detail?field=${f.key}&value=${encodeURIComponent(val)}`;
      a.textContent = val;
      td.innerHTML = '';
      td.appendChild(a);
    } else {
      td.textContent = val;
    }
  });
}

總結： 用 Object.entries 或 for...in 遍歷 JS 物件（Map 序列化後），配合欄位配置表，安全、可維護地填入表格 td 並生成連結。