JavaScript问题：JSON数据无法渲染为表格，显示[object Object]

问题根源 #

1. 直接将数组中的对象赋值给textContent，对象转字符串默认显示[object Object]，这是核心问题。
2. 原代码仅处理表头且逻辑错误，完全未生成表体的数据行。
3. 尝试的解构赋值const {orderid, customer, customerid } = await response.json()无效，因为接口返回的是对象数组，不是单个对象，解构单个属性自然拿不到值。

修正后的完整代码 #

HTML

<table class="table">
  <thead></thead>
  <tbody></tbody>
</table>

CSS（修复box-shadow语法错误）

.table {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 修正原无效的black()写法 */
  border-collapse: collapse;
  font-family: 'Quicksand', sans-serif;
  overflow: hidden;
  font-weight: bold;
}

.table thead th {
  background: cadetblue;
}

.table td,
.table th {
  padding: 10px 20px;
}

.table tbody tr:nth-of-type(even) {
  background: #f3f3f3; /* 替换原白色，提升行区分度 */
}

.table tbody tr:last-of-type {
  border-bottom: 3px solid green;
}

JavaScript（核心逻辑修正）

async function loadIntoTable(url, table) {
  const tableHead = table.querySelector("thead");
  const tableBody = table.querySelector("tbody");
  const response = await fetch(url);
  const data = await response.json();
  
  // 清空表格原有内容
  tableHead.innerHTML = "<tr></tr>";
  tableBody.innerHTML = "";

  // 数组为空时直接终止，避免报错
  if (!data.length) return;

  // 从第一个数据对象提取属性名，生成表头
  const headers = Object.keys(data[0]);
  headers.forEach(headerText => {
    const th = document.createElement("th");
    th.textContent = headerText;
    tableHead.querySelector("tr").appendChild(th);
  });

  // 遍历所有数据对象，生成表体行和单元格
  data.forEach(item => {
    const row = document.createElement("tr");
    headers.forEach(header => {
      const td = document.createElement("td");
      td.textContent = item[header];
      row.appendChild(td);
    });
    tableBody.appendChild(row);
  });
}

loadIntoTable("https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py", document.querySelector("table"));

关键修改说明 #

• 用Object.keys(data[0])动态获取表头字段，适配接口返回的所有属性，无需硬编码orderid等字段。
• 遍历每个数据对象，为每个属性生成对应单元格并填充值，完整渲染所有数据。
• 修复CSS中box-shadow的语法错误，确保样式生效。
• 增加空数组判断，避免无数据时触发后续错误。

内容的提问来源于stack exchange，提问作者Jesse