Javascript - 在循环内循环 object
[英]Javascript - Looping an object inside an loop
问题描述
Not sure if I am phrasing this exactly but I have an object that I want to create a variable from to then append to a div in a page.
不确定我的措辞是否准确，但我有一个 object，我想创建一个从 append 到页面中的 div 的变量。 I am doing this in javascript / Jquery.我在 javascript / Jquery 中这样做。
The object: object：
var object = [
{
"explanation": [
"Test 1",
"Test 2",
"Test 3",
],
"issue": "Walking, Biking, and Transit"
},
{
"explanation": [
"Test 1",
"Test 2",
],
"issue": "Affordable Housing"
},
{
"explanation": [
"Test 3"
],
"issue": "Placemaking"
}
Then I loop it to get the data but want to create a var of html to then append but need to loop the explanation.然后我循环它以获取数据，但想创建一个 html 到 append 的 var，但需要循环解释。
$.each(object, function (key, val) {
var title = val.issue;
var items = val.explanation;
console.log(title, items);
var item =
'<div class="flex items-center justify-between w-full p-2 mt-2 bg-gray-200 rounded-lg"> ' +
' <div>' + title + '</div> ' +
//LOOP items here to create a list of sub items for the parent.
' <div>' + items + '</div> ' +
'</div> ';
$("#gridArea").append(item);
});
I cannot figure out how to loop the multiple explanations inside each object item to create this div, append, repeat.我不知道如何循环每个 object 项目中的多个解释来创建这个 div，append，重复。
If there is a better way let me know, I keep thinking to PHP where I can split it up from to create HTML loop HTML loop.如果有更好的方法让我知道，我一直在考虑 PHP，我可以从中拆分它以创建 HTML 循环 HTML 循环。 etc. but don't have experience with that here.等等，但在这里没有这方面的经验。
3 个解决方案
解决方案1
0 已采纳 2022-03-11 20:33:01
for(let obj of object){
let issue = obj.issue;
for(let exp of obj.explanation){
console.log(exp)
}
}
解决方案2
0 2022-03-11 20:58:30
in Native Javascript, you can do this:在本机 Javascript 中，您可以这样做：
var data = [ { explanation: ["Test 1", "Test 2", "Test 3"], issue: "Walking, Biking, and Transit", }, { explanation: ["Test 1", "Test 2"], issue: "Affordable Housing", }, { explanation: ["Test 3"], issue: "Placemaking", }, ]; let gridArea = document.getElementById("gridArea"); data.forEach((obj) => { let title = obj.issue; let items = obj.explanation; let list = document.createElement("div"); list.classList.add("item"); list.innerHTML = `<h3>${title}</h3>`; items.forEach((item) => { let p = document.createElement("p"); p.innerHTML = item; list.appendChild(p); }); gridArea.appendChild(list); });
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="gridArea"></div> <script src="./index.js"></script> </body> </html>
解决方案3
-1 2022-03-11 20:39:18
You can generate your div of each item using array#map and join them together using array#join() .您可以使用array#map生成每个项目的 div 并使用array#join()将它们连接在一起。
var arr = [ { "explanation": [ "Test 1", "Test 2", "Test 3", ], "issue": "Walking, Biking, and Transit" }, { "explanation": [ "Test 1", "Test 2", ], "issue": "Affordable Housing" }, { "explanation": [ "Test 3" ], "issue": "Placemaking" }]; $.each(arr, function(key, val) { var title = val.issue; var items = val.explanation; var item = '<div class="flex items-center justify-between w-full p-2 mt-2 bg-gray-200 rounded-lg"> ' + ' <div>' + title + '</div> ' + items.map(item => '<div>' + item + '</div>').join('') + '</div> '; $("#gridArea").append(item); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="gridArea"></div>
Alternatively, you can use array#map with template literal to generate your html string.或者，您可以将array#map与模板文字结合使用来生成 html 字符串。
const arr = [ { "explanation": [ "Test 1", "Test 2", "Test 3", ], "issue": "Walking, Biking, and Transit" }, { "explanation": [ "Test 1", "Test 2", ], "issue": "Affordable Housing" }, { "explanation": [ "Test 3" ], "issue": "Placemaking" }]; const htmlString = arr.map(o => `<div class="flex items-center justify-between w-full p-2 mt-2 bg-gray-200 rounded-lg"> <div>${o.issue}</div> ${o.explanation.map(item => `<div>${item}</div>`).join('')} </div>`).join(''); $("#gridArea").append(htmlString);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="gridArea"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.