如何使用JavaScript数组筛选API字段，仅在HTML表格中展示指定列？

你只需要手动指定要展示的字段列表，替换原来自动读取所有字段的逻辑即可，修改后的代码如下：

// 前面的接口请求逻辑保持不变
const balancestoken = await response.json()
           
function generateTableHead(table, data) {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
}

function generateTable(table, data, showFields) {
  for (let element of data) {
    let row = table.insertRow();
    // 只遍历指定要展示的字段，不再遍历返回对象的所有属性
    for (let key of showFields) {
      let cell = row.insertCell();
      let text = document.createTextNode(element[key]);
      cell.appendChild(text);
    }
  }
}

let table = document.querySelector("table");
// 手动定义要展示的三个字段，替换原来自动读取所有字段的逻辑
let showFields = ['token_address', 'symbol', 'balance'];
generateTableHead(table, showFields);
generateTable(table, balancestoken, showFields);

修改逻辑说明：

• 把原来自动获取返回对象所有键的Object.keys(balancestoken[0])替换为手动定义的三个字段数组，表头就只会渲染目标三列
• 生成表格内容的循环从遍历对象所有属性的for (key in element)改为遍历我们指定的字段数组，每行就只会生成三个目标字段对应的单元格

内容的提问来源于stack exchange，提问作者everything is wrong