嵌套循环内追加答案

【问题标题】：Nested-loop Inside Append嵌套循环内追加
【发布时间】：2021-09-07 23:44:09
【问题描述】：

我需要从一个数据点做两个循环来创建多个 div。

数据示例：

let data = [
  [
    {
        title: '1'
    },
    {
        title: '2'
    }
  ],
  [
    {
        title: '3'
    },
    {
        title: '4'
    }
  ]
];

如果我在这里循环，我会得到 2 个数组，每个数组有 2 组 obj。

我需要为每个数组附加一个父 div，并在附加的 div 内，再次循环以附加来自 obj 的信息。

看起来像这样：

<div class="first-array"> //Class is just for reference
  <span>
    <p>title</p>
  </span>
  <span>
    <p>title</p>
  </span>
</div>
<div class="second-array"> //Class is just for reference
  <span>
    <p>title</p>
  </span>
  <span>
    <p>title</p>
  </span>
</div>

我怎样才能做到这一点？

【问题讨论】：

title 或 1、2 等？此外， 不应在  内
使用嵌套循环。外部循环处理外部数组并创建div 元素。内部循环处理内部数组并创建span 和title 元素。
StackOverflow 不是免费的编码服务。你应该try to solve the problem first。请更新您的问题以在minimal reproducible example 中显示您已经尝试过的内容。如需更多信息，请参阅How to Ask，并拨打tour :)

标签： javascript html jquery

【解决方案1】：

您可以使用Array.map 将每个嵌套项的title 属性包装在适当的标签中，然后使用Array.join 将数组转换为字符串：

let data=[[{title:"1"},{title:"2"}],[{title:"3"},{title:"4"}]];

const HTML = data.map(e => '<div>'+e.map(f => `<span><p>${f.title}</p></span>`).join('')+'</div>').join('')

console.log(HTML);

document.write(HTML);

【讨论】：

【解决方案2】：

jQuery 的.append() 可以采用对象数组，因此您可以将原始数据map 转换为您想要的结构

let data = [[{"title":"1"},{"title":"2"}],[{"title":"3"},{"title":"4"}]]

$(document.body).append(data.map(titles =>
  $("<div>").append(titles.map(({ title: text }) =>
    $("<span>").append($("<p>", { text }))))))

div, span, p {
  display: block;
  border: 1px solid;
  padding: .5rem;
  margin: .5rem;
  position: relative;
}
div:after, span:after, p:after {
  position: absolute;
  font-size: 0.6em;
  color: gray;
  top: 0;
  left: 0;
}
div:after { content: "div"; }
span:after { content: "span"; }
p:after { content: "p"; }

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：