I have an array of object that contain info this info are string numbers array
I'm trying to make a function that loop on all this info an print sector name and below the sector name in <li> tag print the licenseTitle each one of them in specific <li>
My problem is when i want to do that my loop print all the licenseTitle in database in the first sector name not like i want.
The output i want is for example
tourism
. tourism 1
. tourism 2
education
.education 1
.education 2
How Can i do that please?
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>Create a separate function for creating the list
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>You can nest template literals
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>