I possess an array of objects containing information, these pieces of info are string numbers array
My aim is to create a function that iterates through all this info and displays the sector name. Below the sector name, for each specific <li>, the licenseTitle should be printed.
The issue arises when I attempt to achieve this, as my loop prints all the licenseTitle in the database under the first sector name instead of how I intend.
The desired output format would be:
tourism
. tourism 1
. tourism 2
education
. education 1
. education 2
Is there a way I can accomplish this?
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"]
}
]
// Printing all sectors' titles with the corresponding 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>