javascript loop on a array object that contain another array

Question

I have an array object that contain an array i want to to loop on this array object to get all the information from it and all the information of the array in this array object

 const database = [ { sectorName: "قطاع السياحة", sectorCode: "t102", sectorIcon: "fas fa-suitcase", sectorN: "tourism", info: ["ترخيص عقاري", "الارشاد السياحي", "تنظيم الرحلات السياحية", "حجز وحدات الايواء", "الايواء السياحي"], desc: "شرح تفصيلي", }, { sectorName: "قطاع الصناعة", sectorCode: "K503", sectorIcon: "fas fa-map-marked-alt", sectorN: "industry", info: [], desc: "شرح تفصيلي", }, { sectorName: "قطاع الزراعة", sectorCode: "B201", sectorIcon: "fas fa-suitcase", sectorN: "agriculture", info: [], desc: "شرح تفصيلي", }, { sectorName: "قطاع التجارة", sectorCode: "m907", sectorIcon: "fas fa-map-marked-alt", sectorN: "trading", info: [], desc: "شرح تفصيلي", }, { sectorName: "قطاع النقل", sectorCode: "P001", sectorIcon: "fas fa-suitcase", sectorN: "transport", info: [], desc: "شرح تفصيلي", }, ]; function getInfo() { let href = document.location.href; let id = href.split('=')[1]; console.log(id); for (let i = 0; i < database.length; i++) { if (database[i].sectorCode === id) { selectElement('.title').innerHTML += `${database[i].sectorName}`; selectElement(".left").innerHTML += ` <div class="box"> <div class="inner-box"> <div class="title"><a href="steps.html?id=${database[i].sectorCode}">${database[i].info[i]}</a></div> <div class="desc">${database[i].desc}</div> </div> <a href="steps.html?id=${database[i].tId}" class="btn">اختار</a> </div> `; } } }

with my code i can't access all the information inside the info array, i want to acces all the information plus the information inside the info array and print them each one in a div how can i make it?

Answer 1

You can use array.join to create a string from an array. array.join(",") inserts commas between the elements of the array.

If you want to do something significantly more complicated, I would recommend using a second for loop for the info field.

Example:

 const database = [ { sectorName: "قطاع السياحة", sectorCode: "t102", sectorIcon: "fas fa-suitcase", sectorN: "tourism", info: ["ترخيص عقاري", "الارشاد السياحي", "تنظيم الرحلات السياحية", "حجز وحدات الايواء", "الايواء السياحي"], desc: "شرح تفصيلي", }, { sectorName: "قطاع الصناعة", sectorCode: "K503", sectorIcon: "fas fa-map-marked-alt", sectorN: "industry", info: [], desc: "شرح تفصيلي", }, { sectorName: "قطاع الزراعة", sectorCode: "B201", sectorIcon: "fas fa-suitcase", sectorN: "agriculture", info: [], desc: "شرح تفصيلي", }, { sectorName: "قطاع التجارة", sectorCode: "m907", sectorIcon: "fas fa-map-marked-alt", sectorN: "trading", info: [], desc: "شرح تفصيلي", }, { sectorName: "قطاع النقل", sectorCode: "P001", sectorIcon: "fas fa-suitcase", sectorN: "transport", info: [], desc: "شرح تفصيلي", }, ]; function getInfo() { let href = document.location.href; let id = href.split('=')[1]; console.log(id); for (let i = 0; i < database.length; i++) { if (database[i].sectorCode === id) { selectElement('.title').innerHTML += `${database[i].sectorName}`; selectElement(".left").innerHTML += ` <div class="box"> <div class="inner-box"> <div class="title"><a href="steps.html?id=${database[i].sectorCode}">${database[i].info.map(curr => `<div>${curr}</div>`)}</a></div> <div class="desc">${database[i].desc}</div> </div> <a href="steps.html?id=${database[i].tId}" class="btn">اختار</a> </div> `; } } }

Answer 2

You can use map and join to achieve it:

`<div class="info">${database[i].info.map((inf) => '<div>' + inf + '</div>').join("")}</div>`