How to use map inside map in JavaScript?-CodePudding

I have list inside list. I iterated the first list and inside of that list i iterated the second on for li

I tried this but I am getting error in second map iteration {act.name}

document.getElementById("accordionExample").innerHTML = top.map((item, index) => {
        return `<div className="card">
                    <div className="card-header" id="heading">
                        <h2 className="mb-0 collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="true" aria-controls="collapse"> ${item.name} </h2>
                    </div>
                    <div id="collapse" className="collapse" aria-labelledby="heading" data-parent="#accordionExample">
                        <div className="card-body">
                            <ul>
                                ${item.active}.map((act) =>  {
                                    <li>${act.name}</li>
                                })
                            </ul>
                        </div>
                    </div>
                </div>`
    }).join('');

Is this the wrong way to iterate the second map.

CodePudding user response：

You need to return a string.

Your curlies are also wrong

Lastly do NOT name anything top; it is a reserved word for the top parent window

${item.active.map(act =>  `<li>${act.name}</li>`).join('')}

Like this

const arr = [
  {name : "name 1", active: [ {name:"act 1"}, {name:"act 2"}] },
  {name : "name 2", active: [ {name:"act 1"}, {name:"act 2"}] }
]
document.getElementById("accordionExample").innerHTML = arr.map((item, index) => `<div className="card">
  <div className="card-header" id="heading">
    <h2 className="mb-0 collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="true" aria-controls="collapse"> ${item.name} </h2>
  </div>
  <div id="collapse" className="collapse" aria-labelledby="heading" data-parent="#accordionExample">
    <div className="card-body">
      <ul>
        ${item.active.map(act =>  `<li>${act.name}</li>`).join('')}
      </ul>
    </div>
  </div>
</div>`).join('');

<div id="accordionExample"></div>

CodePudding user response：

document.getElementById("accordionExample").innerHTML = top.map((item, index) => {
        const activeList = item.active.map((act) =>`<li>${act.name}</li>`).join('');
        return `<div className="card">
                    <div className="card-header" id="heading">
                        <h2 className="mb-0 collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="true" aria-controls="collapse"> ${item.name} </h2>
                    </div>
                    <div id="collapse" className="collapse" aria-labelledby="heading" data-parent="#accordionExample">
                        <div className="card-body">
                            <ul>
                                ${activeList}
                            </ul>
                        </div>
                    </div>
                </div>`
    }).join('');