使用jQuery分离JSON对象中的嵌套数组

嗨，我完全懂你现在的困扰！本来只是想把每个流派单独塞进<p>标签里，结果嵌套循环搞出了重复的块，肯定头大对吧？咱们来把这个问题捋清楚，分分钟解决它～

首先，我猜你之前的代码大概是这样的（踩了重复添加容器的坑）：

// 错误示例：每次循环流派都append外层块，导致重复
const data = { items: [{ title: "头号玩家", genres: ["动作", "科幻"] }, { title: "怦然心动", genres: ["喜剧", "爱情"] }] };
const container = document.getElementById("content");

data.items.forEach(item => {
  const itemBlock = document.createElement("div");
  itemBlock.innerHTML = `<h2>${item.title}</h2>`;
  
  // 问题就在这里！每次遍历流派都把整个itemBlock加到页面
  item.genres.forEach(genre => {
    itemBlock.innerHTML += `<p>${genre}</p>`;
    container.appendChild(itemBlock);
  });
});

上面的代码会让每个流派都触发一次container.appendChild(itemBlock)，相当于同一个项目块被加了N次（N是流派数量），自然就重复了。

正确的做法：先组装完所有内容，再一次性添加 #

你需要先把当前项目的所有流派<p>都塞进外层块里，最后只把完整的外层块加到页面一次就好。两种写法供你选：

写法1：用DOM元素操作

const data = { items: [{ title: "头号玩家", genres: ["动作", "科幻"] }, { title: "怦然心动", genres: ["喜剧", "爱情"] }] };
const container = document.getElementById("content");

data.items.forEach(item => {
  // 创建当前项目的外层容器
  const itemBlock = document.createElement("div");
  itemBlock.innerHTML = `<h2>${item.title}</h2>`;
  
  // 先把所有流派的<p>都塞进itemBlock
  item.genres.forEach(genre => {
    const genrePara = document.createElement("p");
    genrePara.textContent = genre;
    itemBlock.appendChild(genrePara);
  });
  
  // 最后只加一次到页面！
  container.appendChild(itemBlock);
});

写法2：用模板字符串更简洁

如果你喜欢用字符串拼接，map+join可以快速把流派转换成HTML片段：

const data = { items: [{ title: "头号玩家", genres: ["动作", "科幻"] }, { title: "怦然心动", genres: ["喜剧", "爱情"] }] };
const container = document.getElementById("content");

data.items.forEach(item => {
  // 把每个流派转成<p>字符串，再拼接起来
  const genreHtml = item.genres.map(genre => `<p>${genre}</p>`).join('');
  // 组装整个项目的HTML
  const itemHtml = `
    <div>
      <h2>${item.title}</h2>
      ${genreHtml}
    </div>
  `;
  // 一次性插入到容器
  container.innerHTML += itemHtml;
});

这样处理后，每个项目只会生成一个外层块，里面的流派各自占一个<p>，完全不会重复啦～

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