如何从嵌套数组对象中动态生成带card类的div并输出数据？

原代码存在两个明显问题：

1. 标题访问逻辑错误：content.title[index]是无效写法，content对象里并没有title数组，每个列表项本身就自带title属性，应该直接用当前遍历项的item.title
2. 未渲染content字段的内容

以下是修正后的完整代码：

const data = {
  type: 'main',
  section1: [
    {title: 'title_one', content: 'cont_1'},
    {title: 'title_two', content: 'cont_2'}
  ]
}

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

// 调用示例：生成的HTML可直接插入页面
const resultHtml = main(data);
console.log(resultHtml);

代码说明： #

• 用item.title和item.content直接访问当前项的属性，完全匹配给定的数据结构
• 新增<p>标签展示内容字段，你可以根据需求替换成其他标签（如div、span）
• 模板字符串保留了换行缩进，生成的HTML结构更易读
• 传入定义好的data对象调用函数，就能得到包含两个完整card的main区域HTML

内容的提问来源于stack exchange，提问作者the Alex Fire