英文:
how to loop over a nested array and add parts of it to different divs with the same id javascript
问题
我有一个嵌套数组的 JSON，我想将其中的部分打印到具有相同 ID 的 div 中。我考虑使用 foreach 循环来遍历嵌套数组。为了将它们添加到每个 div，我考虑给每个 div 添加一个数据集，但当我这样做后，在 foreach 循环之后添加一个 for 循环时，所有数据集都被设置为数组中的最后一个 ID。我该怎么做？
const data = [
{
"id": 1,
"movie_name": "last holiday",
"date": "2023-10-29",
"length": ["1 hour 30"],
},
{
"id": 2,
"movie_name": "pitch perfect",
"date": "2023-04-24",
"length": ["2 hours"]
}
];
<div class="fun">
<p>Hello</p>
</div>
<div class="fun">
<p>Hello</p>
</div>
data.forEach(e => {
for (let i = 0; i < fun.length; i++) {
fun[i].dataset.id = e.id;
if (fun[i].dataset.id === e.id) {
fun[i].insertAdjacentHTML("beforeend",`
<h4 class="cardTitle">${e.movie_name}</h4>
<h5 class="cardSubtitle">${e.date}</h5>`);
}
}
});
<!-- 期望输出如下： -->
<div class="fun" data-id="1">
<p>Hello</p>
<h3>last holiday</h3>
<h4>2023-10-29</h4>
</div>
<div class="fun" data-id="2">
<p>Hello</p>
<h3>pitch perfect</h3>
<h4>2023-04-24</h4>
</div>
最佳方法是将数据添加到对应的 div 中，而不需要额外的循环。如果你想按 ID 匹配 div，可以使用类似下面的方法：
data.forEach(e => {
const div = document.querySelector(`.fun[data-id="${e.id}"]`);
if (div) {
div.insertAdjacentHTML("beforeend",`
<h3>${e.movie_name}</h3>
<h4>${e.date}</h4>`);
}
});
英文:
I have a json a nested array that I would like to print parts of it to a div that has the same id. I had thought of doing a foreach loop to loop to loop of the nested array. In order to add it to each div I thought about giving each div a dataset but when I do this and then add a for loop after the foreach loop all the data set is being set to the last id in the array. What should I do?
const data = [
{
"id": 1,
"movie_name": "last holiday",
"date": "2023-10-29",
"length": ["1 hour 30"],
},
{
"id": 2,
"movie_name": "pitch perfect",
"date": "2023-04-24",
"length": ["2 hours"]
}
];
<div class="fun">
<p>Hello</p>
</div>
<div class="fun">
<p>Hello</p>
</div>
data.forEach(e => {
for (let i = 0; i < fun.length; i++) {
fun[i].dataset.id = e.id;
if (fun[i].dataset.id === e.id) {
fun[i].insertAdjacentHTML("beforeend",`
<h4 class="cardTitle">${e.movie_name}</h4>
<h5 class="cardSubtitle">${e.date}</h5>`);
}
}
})
I want the following output to be
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div class="fun" data-id="1">
<p>Hello</p>
<h3>last holiday</h3>
<h4>2023-10-29</h4>
</div>
<div class="fun" data-id="2">
<p>Hello</p>
<h3>pitch perfect</h3>
<h4>2023-04-24</h4>
</div>
<!-- end snippet -->
What is the best way to do this
答案1
得分: 1
如果您使用document.querySelectorAll('.fun')来获取所有具有fun类的div，然后您可以循环遍历data并使用该索引将您的内容插入到allFuns[i]中的每个对象。
以下是生成的HTML：
<body>
<div class="fun" data-id="1">
<p>Hello</p>
<h4 class="cardTitle">last holidy</h4>
<h5 class="cardSubtitle">2023-10-29</h5>
</div>
<div class="fun" data-id="2">
<p>Hello</p>
<h4 class="cardTitle">pitch perfect</h4>
<h5 class="cardSubtitle">2023-04-24</h5>
</div>
<div class="fun">
<p>Hello</p>
</div>
</body>
英文:
If you use document.querySelectorAll('.fun') to get all the divs with fun class, you can then loop over data and use that index to insert your content to allFuns[i] for each object.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const data = [
{"id": 1, "movie_name": "last holidy", "date": "2023-10-29", "length": ["1 hour 30"], },
{"id": 2, "movie_name": "pitch perfect", "date": "2023-04-24", "length": ["2 hours"] }
];
const allFuns = document.querySelectorAll('.fun');
for (let i in data) {
let obj = data[i];
allFuns[i].dataset.id = obj.id;
allFuns[i].insertAdjacentHTML("beforeend",`
<h4 class="cardTitle">${obj.movie_name}</h4>
<h5 class="cardSubtitle">${obj.date}</h5>
`);
}
<!-- language: lang-html -->
<div class="fun">
<p>Hello</p>
</div>
<div class="fun">
<p>Hello</p>
</div>
<div class="fun">
<p>Hello</p>
</div>
<!-- end snippet -->
This generates the following HTML:
<body>
<div class="fun" data-id="1">
<p>Hello</p>
<h4 class="cardTitle">last holidy</h4>
<h5 class="cardSubtitle">2023-10-29</h5>
</div>
<div class="fun" data-id="2">
<p>Hello</p>
<h4 class="cardTitle">pitch perfect</h4>
<h5 class="cardSubtitle">2023-04-24</h5>
</div>
<div class="fun">
<p>Hello</p>
</div>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论