Tengo una matriz de objetos que contienen información, esta información es una matriz de números de cadena
Estoy tratando de hacer una función que repita toda esta información, un nombre de sector de impresión y debajo del nombre de sector en la etiqueta <li> , imprima el título de licencia de cada uno de ellos en <li> específico
Mi problema es cuando quiero hacer que mi ciclo imprima todo el título de licencia en la base de datos en el nombre del primer sector, no como quiero.
La salida que quiero es por ejemplo
turismo
. turismo 1
. turismo 2
educación
.educación 1
.educación 2
¿Cómo puedo hacer eso por favor?
const database = [{ sectorId: 1, sectorName: "tourism", sectorIcon: "icon-1.png", sectorN: "tourism", licenseTitle: ["tourism 1", "tourism 2"], licenseNum: ["7960", "7961"] }, { sectorId: 2, sectorName: "education", sectorIcon: "icon-2.png", sectorN: "education", licenseTitle: ["education 1", "education 2"], licenseNum: ["7950", "7951"] } ] //Print all sectors title with the license title and description function AllSectors(){ for(let i = 0; i < database.length; i++){ document.querySelector('.content-right').innerHTML += ` <div class="box"> <div class="box-title"> <div class="title"> <input type="checkbox" value="${database[i].sectorN}" class="checktitle" name="sectorCheck"> ${database[i].sectorName} </div> <div class="arrow"> <i class="fas fa-angle-down"></i> </div> </div> <div class="box-details"> <ul class="details-list">`; for(let j = 0; j < database[i].licenseTitle.length; j++){ document.querySelector('.details-list').innerHTML += ` <li><a href="#">${database[i].licenseTitle[j]}</a></li> `; } `</ul> </div> </div> `; } } AllSectors(); <div class="content-right"></div>Cree una función separada para crear la lista
const database = [{ sectorId: 1, sectorName: 'tourism', sectorIcon: 'icon-1.png', sectorN: 'tourism', licenseTitle: ['tourism 1', 'tourism 2'], licenseNum: ['7960', '7961'], }, { sectorId: 2, sectorName: 'التعليم', sectorIcon: 'icon-2.png', sectorN: 'education', licenseTitle: ['education 1', 'education 2'], licenseNum: ['7950', '7951'], }, ]; //Print all sectors title with the license title and description function AllSectors() { for (let i = 0; i < database.length; i++) { const str = ` <div class="box"> <div class="box-title"> <div class="title"> <input type="checkbox" value="${database[i].sectorN}" class="checktitle" name="sectorCheck"> ${database[i].sectorName} </div> <div class="arrow"> <i class="fas fa-angle-down"></i> </div> </div> <div class="box-details"> <ul class="details-list">${createList(database[i])}</ul> </div> </div>`; document.querySelector('.content-right').innerHTML += str; } } AllSectors(); function createList(database) { let z = ''; for (let j = 0; j < database.licenseTitle.length; j++) { z += `<li><a href="#">${database.licenseTitle[j]}</a></li>`; } return z; } <div class="content-right"></div>Puede anidar literales de plantilla
document.querySelector('.content-right').innerHTML = database .map(db => ` <div class="box"> <div class="box-title"> <div class="title"> <label> <input type="checkbox" value="${db.sectorN}" class="checktitle" name="sectorCheck"> ${db.sectorN} </label> </div> <div class="arrow"> <i class="fas fa-angle-down"></i> </div> </div> <div class="box-details"> <ul class="details-list">${db.licenseTitle .map(lT=>`<li><a href="#">${lT}</a></li>`).join("")} </ul> </div> </div>`).join(""); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" /> <div class="content-right"></div> <script> const database = [{ sectorId: 1, sectorName: 'tourism', sectorIcon: 'icon-1.png', sectorN: 'tourism', licenseTitle: ['tourism 1', 'tourism 2'], licenseNum: ['7960', '7961'], }, { sectorId: 2, sectorName: 'التعليم', sectorIcon: 'icon-2.png', sectorN: 'education', licenseTitle: ['education 1', 'education 2'], licenseNum: ['7950', '7951'], }, ]; </script>