如何从嵌套数组中动态渲染 HTML 卡片组件-js教程-PHP中文网

本文讲解如何正确遍历嵌套在对象中的数组（如 section1），提取每个对象的 title 和 content 字段，并生成结构清晰、语义化的动态 HTML 片段。

本文讲解如何正确遍历嵌套在对象中的数组（如 `section1`），提取每个对象的 `title` 和 `content` 字段，并生成结构清晰、语义化的 `

` 动态 html 片段。

在前端开发中，常需将结构化数据（如 API 返回的嵌套对象）转化为 DOM 元素。示例数据中，section1 是一个包含多个卡片对象的数组，每个对象具有 title 和 content 属性。原始代码存在关键错误：在 .map() 回调中误用 content.title[index]——但 content 是外层对象，其自身并无 title 数组；真正存放标题的是 content.section1[index].title。

✅ 正确做法是：在 map 的每个迭代中直接访问当前 item（即 section1 中的单个对象），从而安全获取 item.title 和 item.content：

function main(content) {
  const html = content.section1.map((item, index) => `
    <div class="card">
      <h1>${item.title}</h1>
      <p>${item.content}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
														src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
													<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
    </div>
  `);
  return `
    <main><section>${html.join('')}</section></main>
  `;
}

? 小贴士：

避免依赖索引访问嵌套属性（如 content.section1[index].title），直接使用 item.title 更简洁、可读性更强，也避免因索引错位导致的 undefined 错误；
若需保留 index 用于 key 或样式控制（如 data-index），可补充：
；
实际项目中建议结合模板引擎（如 Handlebars）或框架（React/Vue）处理渲染逻辑，提升可维护性与安全性（防止 XSS，需对 item.content 做 HTML 转义）；
若 section1 可能为空或非数组，建议增加防御性检查：Array.isArray(content.section1) && content.section1.length > 0。

最终调用示例：

const data = {
  type: 'main',
  section1: [
    { title: '标题一', content: '这是第一张卡片的内容。' },
    { title: '标题二', content: '这是第二张卡片的内容。' }
  ]
};
console.log(main(data));

输出将为语义清晰、符合现代 HTML 规范的卡片结构，便于后续 CSS 样式化与交互增强。