将数组传递给 HTML table 或变量

Question

我正在尝试将来自 API 调用的信息传递到 HTML table，然后我还可以将其用于图表。附上数组图片以显示数据结构。我不断收到 column_names 不可迭代的错误，但经过数小时的搜索后我仍无法解决。我认为这与我的数组中的名称有关，但找不到解决方案。我是新手，我觉得答案非常简单，所以任何帮助或对我的错误的解释都将不胜感激。

数组格式

async function loadintotable(url, table) {
    const tableHead = table.querySelector('thead');
    const tableBody = table.querySelector('tbody');
    const response = await fetch(url);
    const { column_names, data } = await response.json();

    tableHead.innerHTML = '<tr></tr>';
    tableBody.innerHTML = '';
    for (const headerText of column_names) {
        const headerElement = document.createElement('th');

        headerElement.textContent = headerText;
        tableHead.querySelector('tr').appendChild(headerElement);
    }

    for (const row of data) {
        const rowElement = document.createElement('tr');

        for (const cellText of row) {
            const cellElement = document.createElement('td');

            cellElement.textContent = cellText;
            rowElement.appendChild(cellElement);
        }

        tableBody.appendChild(rowElement);
    }
}

Answer 1

您的api回复格式为

{
  dataset: {
    column_names: [],
    data: []
  }
}

因此，为了访问 column_names 和数据，您必须

const json = await response.json();
const { column_names, data } = json.dataset;

或在一行中

const { column_names, data } = (await response.json()).dataset;

注意行尾的 .dataset

将数组传递给 HTML table 或变量

Passing an array into an HTML table or variable

javascript

arrays

html-table