如何将含嵌套对象的二维Javascript数组转为动态HTML表格？

以下是针对需求的解决方案，能自动从指定结构的二维数组中提取对象属性作为表头，生成符合要求的HTML表格，且完全适配不同的对象结构：

完整实现代码 #

// 目标二维数组（可替换为任意符合[索引, 对象]结构的数组）
const arr = [
  ["0", { cat_id: "1", cat_name: "Tiger" }],
  ["1", { cat_id: "2", cat_name: "Lion" }],
  ["2", { cat_id: "3", cat_name: "Cheetah" }],
  ["3", { cat_id: "5", cat_name: "Leopard" }]
];

/**
 * 动态生成适配对象结构的HTML表格
 * @param {Array} data - 格式为[[索引, 对象], ...]的二维数组
 * @returns {string} 完整的表格HTML代码
 */
function generateDynamicTable(data) {
  // 过滤掉无效数据（第二个元素非对象的项）
  const validData = data.filter(item => typeof item[1] === 'object' && item[1] !== null);
  
  // 无有效数据时返回提示
  if (!validData.length) {
    return "<p>No valid data available</p>";
  }

  // 从第一个有效对象中提取表头字段
  const firstObj = validData[0][1];
  const headers = Object.keys(firstObj);

  // 构建表头HTML
  const headerCells = headers.map(header => `<th>${header}</th>`).join('');
  const tableHead = `<thead><tr>${headerCells}</tr></thead>`;

  // 构建表格主体HTML
  const tableRows = validData.map(item => {
    const obj = item[1];
    // 按表头顺序提取对应值，无对应值时填空字符串
    const rowCells = headers.map(header => `<td>${obj[header] || ''}</td>`).join('');
    return `<tr>${rowCells}</tr>`;
  }).join('');
  const tableBody = `<tbody>${tableRows}</tbody>`;

  // 组装带容器的完整表格（使用指定的类名）
  return `<div class="s-table-container"><table class="s-table">${tableHead}${tableBody}</table></div>`;
}

// 将生成的表格插入到页面指定元素中（需提前在HTML中定义id为table-wrap的元素）
const targetElement = document.getElementById('table-wrap');
if (targetElement) {
  targetElement.innerHTML = generateDynamicTable(arr);
}

核心逻辑说明 #

1. 数据校验与过滤：先过滤掉数组中第二个元素不是对象的无效项，避免后续报错。
2. 动态提取表头：利用Object.keys()从第一个有效对象中获取所有属性名，自动生成表头，无需提前硬编码字段。
3. 生成表格内容：遍历数组中的每个对象，按照表头的顺序提取对应的值，生成表格行；如果某个对象缺少表头中的字段，自动用空字符串填充，避免显示undefined。
4. 兼容性适配：不管是猫的属性组还是狗的属性组，只要数组结构是[[索引, 对象], ...]，就能自动适配生成对应表格。

使用示例（狗的数组） #

直接将狗数组传入函数即可：

const dogArr = [
  ["0", { dog_id: "8866", dog_colour: "Brown", dog_desc: "Small, bit grumpy" }],
  ["1", { dog_id: "8867", dog_colour: "Black", dog_desc: "Nice dog" }],
  ["2", { dog_id: "8868", dog_colour: "Brown", dog_desc: "Dead" }],
  ["3", { dog_id: "8869", dog_colour: "Blonde", dog_desc: "Barks a lot" }]
];

targetElement.innerHTML = generateDynamicTable(dogArr);

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