No estoy seguro de si estoy expresando esto exactamente, pero tengo un objeto del que quiero crear una variable para luego agregarlo a un div en una página. Estoy haciendo esto en javascript/Jquery.
El objeto:
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" }Luego hago un bucle para obtener los datos, pero quiero crear una var de html para luego agregarla, pero necesito repetir la explicación.
$.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); });No puedo entender cómo hacer un bucle de las múltiples explicaciones dentro de cada elemento del objeto para crear este div, agregar, repetir.
Si hay una mejor manera házmelo saber! Sigo pensando en PHP donde puedo dividirlo para crear un bucle HTML, bucle HTML, etc., pero no tengo experiencia con eso aquí.
for(let obj of object){ let issue = obj.issue; for(let exp of obj.explanation){ console.log(exp) } }en Javascript nativo, puedes hacer esto:
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>Puede generar su div de cada elemento usando array#map y unirlos usando 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> Alternativamente, puede usar array#map con plantilla literal para generar su cadena 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>