如何动态渲染嵌套数组中的对象数据到 HTML 卡片结构

本文讲解如何正确遍历嵌套在对象中的数组，提取每个对象的 title 和 content 字段，并生成带 .card 类的动态 HTML 结构，避免常见属性访问错误。

本文讲解如何正确遍历嵌套在对象中的数组，提取每个对象的 `title` 和 `content` 字段，并生成带 `.card` 类的动态 html 结构，避免常见属性访问错误。

在前端开发中，常需将 JavaScript 数据结构（如含多个对象的数组）映射为 DOM 元素。示例数据中，section1 是一个包含两个对象的数组，每个对象具有 title 和 content 属性。目标是为每个对象生成一个

，内部嵌套

标题与对应内容。

原始代码存在关键错误：在 .map() 回调中，content.title[index] 试图从顶层 content 对象直接读取 title 数组，但实际 title 并非独立数组——它属于 section1 中每个子对象的自有属性。因此应使用 item.title（更简洁安全）或 content.section1[index].title（冗余但可行）。

✅ 正确写法如下（推荐使用 item 参数）：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

function main(content) {
  const html = content.section1.map(item => `
    <div class="card">
      <h1>${item.title}</h1>
      <p>${item.content}</p>
    </div>
  ).join('');

  return `
    <main><section>${html}</section></main>
  `;
}

⚠️ 注意事项：

不要误写为 content.title[index] 或 content.content[index] —— 这会返回 undefined，导致渲染空标签；
使用模板字符串时注意缩进与换行，避免 HTML 中出现意外空白字符（生产环境建议用 trim() 或构建工具处理）；
若需绑定事件或后续操作，建议配合 innerHTML 插入后，用 document.querySelectorAll('.card') 获取节点，而非依赖字符串拼接逻辑；
对用户输入的 title / content 做 XSS 防护（如使用 textContent 替代插值，或采用 DOMPurify.sanitize() 处理）。

总结：遍历嵌套数组时，应始终基于当前迭代项（item）访问其属性，而非错误地向上回溯父对象结构。清晰的数据路径认知（content → section1 → [item] → title/content）是可靠渲染的前提。