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 >
<div >
<div ><a href="steps.html?id=${database[i].sectorCode}">${database[i].info[i]}</a></div>
<div >${database[i].desc}</div>
</div>
<a href="steps.html?id=${database[i].tId}" >اختار</a>
</div>
`;
        }
    }
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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?

CodePudding user response：

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 >
<div >
<div ><a href="steps.html?id=${database[i].sectorCode}">${database[i].info.map(curr => `<div>${curr}</div>`)}</a></div>
<div >${database[i].desc}</div>
</div>
<a href="steps.html?id=${database[i].tId}" >اختار</a>
</div>
`;
        }
    }
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use map and join to achieve it:

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