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. I am doing this in javascript / Jquery.
The 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.
$.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.
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, etc. but don't have experience with that here.
for(let obj of object){
let issue = obj.issue;
for(let exp of obj.explanation){
console.log(exp)
}
}
in Native Javascript, you can do this:
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>You can generate your div of each item using array#map and join them together using 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.
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>