如何遍历嵌套JavaScript对象生成表格？解决字符遍历错误问题

看起来你之前的遍历方式踩了个小坑——把外层键的字符串本身当成了遍历对象，所以才会把"Date"拆成单个字符逐个处理。别担心，我们可以用正确的方法来遍历这个结构的对象，生成你想要的表格。

先分析你的数据结构 #

你的对象是外层为字段名，内层为对应索引的键值对，这种结构很适合通过「先拿表头，再按索引取每行数据」的方式来生成表格。

实现步骤&代码示例 #

这里我用原生JavaScript来实现，不管是插入到页面还是生成HTML字符串都适用：

1. 定义你的数据

const stockData = { 
  "Date":{"0":"30-April-2018","1":"27-April-2018","2":"26-April-2018"}, 
  "Open Price":{"0":15.75,"1":16.8,"2":17.5}, 
  "High Price":{"0":15.85,"1":17.0,"2":17.5}, 
  "Low Price":{"0":14.65,"1":15.6,"2":16.35} 
};

2. 生成表格的函数

function createStockTable(data) {
  // 第一步：获取所有表头字段（外层键）
  const tableHeaders = Object.keys(data);
  // 第二步：确定表格的行数（取任意一个字段的条目数即可）
  const totalRows = Object.keys(data[tableHeaders[0]]).length;

  // 创建表格元素
  const table = document.createElement('table');
  table.style.borderCollapse = 'collapse';
  table.border = '1';

  // 生成表头行
  const headerRow = document.createElement('tr');
  tableHeaders.forEach(headerText => {
    const th = document.createElement('th');
    th.textContent = headerText;
    th.style.padding = '8px';
    th.style.backgroundColor = '#f0f0f0';
    headerRow.appendChild(th);
  });
  table.appendChild(headerRow);

  // 生成数据行
  for (let rowIndex = 0; rowIndex < totalRows; rowIndex++) {
    const dataRow = document.createElement('tr');
    tableHeaders.forEach(field => {
      const td = document.createElement('td');
      td.textContent = data[field][rowIndex];
      td.style.padding = '8px';
      td.style.textAlign = 'center';
      dataRow.appendChild(td);
    });
    table.appendChild(dataRow);
  }

  return table;
}

// 把表格添加到页面中（比如body）
document.body.appendChild(createStockTable(stockData));

为什么之前的方法出错？ #

你提到的遍历每个字符的问题，大概率是因为你直接遍历了键的字符串本身（比如for (let char of "Date")），而不是先通过Object.keys(data)获取外层键的数组。Object.keys()会返回对象所有可枚举的外层键组成的数组，这样遍历的时候就是拿到"Date"、"Open Price"这些完整的字段名，而不是拆分字符。

另一种方式：生成HTML字符串 #

如果你更倾向于直接生成HTML字符串（比如用于框架渲染或者后端输出），可以用模板字符串来实现：

function generateTableHTML(data) {
  const headers = Object.keys(data);
  const rowCount = Object.keys(data[headers[0]]).length;

  let html = '<table border="1" style="border-collapse: collapse;">';
  // 表头
  html += '<tr>';
  headers.forEach(header => {
    html += `<th style="padding:8px; background:#f0f0f0;">${header}</th>`;
  });
  html += '</tr>';

  // 数据行
  for (let i = 0; i < rowCount; i++) {
    html += '<tr>';
    headers.forEach(field => {
      html += `<td style="padding:8px; text-align:center;">${data[field][i]}</td>`;
    });
    html += '</tr>';
  }
  html += '</table>';

  return html;
}

// 使用示例：插入到页面
document.body.innerHTML = generateTableHTML(stockData);

这样就能完美生成你需要的表格啦！

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