javascript loop inside an array that exist inside an array object

Question

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>

mplungjan · Accepted Answer · 2022-01-29 13:59:55Z

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>

Shouldn't you be using sectorN since OP wants education and not التعليم

brk · Accepted Answer · 2022-01-29 13:17:13Z

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>

Collectives™ on Stack Overflow

javascript loop inside an array that exist inside an array object

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related