本文详解如何正确遍历嵌套 JSON 结构（含列定义与二维行数据），生成语义清晰、结构合规的 HTML 表格，重点纠正常见循环嵌套错误，确保每行数据独立渲染为 。

本文详解如何正确遍历嵌套 json 结构（含列定义与二维行数据），生成语义清晰、结构合规的 html 表格，重点纠正常见循环嵌套错误，确保每行数据独立渲染为 `

`。

在前端开发中，将结构化 JSON 数据动态展示为 HTML 表格是一项基础但易出错的任务。问题核心在于：表格头部（）与主体行（ ）需严格分离，且每一行数据必须包裹在独立的 标签内。原始代码中将 开闭标签置于最外层循环之外，导致所有单元格被塞入单个 ，从而出现“一整行显示数组”的异常效果。

以下是修复后的完整实现方案，采用原生 JavaScript，逻辑清晰、可读性强：

<div id="demo"></div>

<script>
const js = {
  "columns": [
    {"title": "t1"},
    {"title": "t2"},
    {"title": "t3"},
    {"title": "t4"},
    {"title": "t5"}
  ],
  "rows": [
    ["t1row1", "t2row1", "t3row1", "t4row1", "t5row1"],
    ["t1row2", "t2row2", "t3row2", "t4row2", "t5row2"],
    ["t1row3", "t2row3", "t3row3", "t4row3", "t5row3"]
  ]
};

let html = "<table border='1'>";

// 渲染表头 <thead>
html += "<tr>";
js.columns.forEach(col => {
  html += `<th>${col.title}`;
});
html += "</script>

"; // 渲染数据行 —— 关键：每个 rows[i] 对应一个 js.rows.forEach(row => { html += " "; row.forEach(cell => { html += `${cell}`; }); html += ""; }); html += ""; document.getElementById("demo").innerHTML = html;

✅ 关键改进点说明：

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

• 使用 forEach() 替代 for...in，避免遍历原型链风险，更符合现代 JS 实践；
• 表头循环与行循环完全解耦，确保 正确包裹每组单元格；
• 内层循环遍历 row（即 js.rows[i] 的每个元素），而非整个 js.rows 数组，从而逐单元格拼接 ；
• 所有字符串拼接逻辑封装于单一变量 html，提升可维护性。

⚠️ 注意事项：

• 若 JSON 数据来自网络请求（如 fetch），请确保在 DOM 加载完成后执行渲染，或使用 DOMContentLoaded 事件监听；
• 生产环境建议对 cell 值做 HTML 转义（如使用 textContent 或 DOMPurify），防止 XSS；
• 如需样式增强，可添加 CSS 类（如 class="data-table"）并配合外部样式表控制边框、间距与响应式行为。

通过以上结构化处理，即可稳定、可扩展地将任意符合该格式的 JSON 数据（列定义 + 行数组）转化为标准 HTML 表格。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！