这个javascript出了什么问题答案

【问题标题】：What is going wrong with this javascript这个javascript出了什么问题
【发布时间】：2022-11-30 05:19:19
【问题描述】：

我试图将整个 json 作为表格格式发布，但找不到它只说“对象对象”等的原因我尝试将常量数据更改为“const {orderid，customer，customerid} = await response.json
但它什么也没做。就像当我在控制台中打开那个 json 文件时，数组从 0-75 编号，并且有名为 orderid、customer 等的对象，所以我在做什么以及如何以表格形式打开站点上的所有数组

async function loadIntoTable(url, table) {
  const tableHead = table.querySelector("thead");
  const tableBody = table.querySelector("tbody")
  const response = await fetch("https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py");
  const data = await response.json();
  console.log(data)
  
  //puhdista
  tableHead.innerHTML = "<tr></tr>";
  tableBody.innerHTML = "";
  
  // lollero
  for (const dataText of data) {
    const dataElement = document.createElement("th");
    dataElement.textContent = dataText;
    tableHead.querySelector("tr").appendChild(dataElement);
  }
}

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

.table {
  box-shadow: 0 0 10px black(0, 0, 0, 0, 1);
  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: white;
}

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

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

【问题讨论】：

请edit你的问题来展示你从那个 URL 得到的 JSON 的例子。
您不能只是将对象转储到 HTML 中。您需要单独使用这些属性。

标签： javascript html css json

【解决方案1】：

您需要实际为标题选择一个属性，例如

dataElement.textContent = dataText.customer;

否则，您正试图使整个对象成为标题。

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();
  // console.log(data)
  
  //puhdista
  tableHead.innerHTML = "<tr></tr>";
  tableBody.innerHTML = "";
  
  // lollero
  for (const dataText of data) {
    const dataElement = document.createElement("th");
    dataElement.textContent = dataText.customer;
    tableHead.querySelector("tr").appendChild(dataElement);
  }
}

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

.table {
  box-shadow: 0 0 10px black(0, 0, 0, 0, 1);
  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: white;
}

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

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

【讨论】：