我在串列內有一個串列。我迭代了第一個串列,并在該串列中迭代了第二個li
。我試著這樣做,但是我在第二個地圖迭代中得到了錯誤 {act.name}
document.getElementById("accordionExample").innerHTML = top.map(( item, index) => {
return `<div className="card"/span>>
< div className="card-header" id=" heading">
< h2 className="mb- 0塌陷" data-toggle="塌陷" data- target="#collapse" aria-expanded="true" aria-controls="crapse"> ${item. name} </h2> ${item.
</div>/span>
< div id="collapse"/span> className="collapse" aria-labelledby="heading" data-parent="#accordionExample">
<div className="card-body"/span>>
<ul>/span>
${item.active}.map((act) => {
<li>${act.name}</li>
})
</ul>
</div>/span>
</div>/span>
</div>`。
}).join('')。
這是否是迭代第二個地圖的錯誤方式。
uj5u.com熱心網友回復:
你需要回傳一個字串。
你的curlies也是錯誤的
最后,不要給任何東西命名為top;它是一個保留詞,用于頂層父視窗。
${item.active. map(span class="hljs-params">act => `<li> ${act. name}</li>`).join(''/span>)}。
像這樣
。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(''/span>)}
</ul>
</div>
</div>
</div>`).join('');
< div id="accordionExample"></div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
uj5u.com熱心網友回復:
document.getElementById("accordionExample").innerHTML = top.map(( item, index) => {
const activeList = item.active.map((act) =>`<li>${act. name}</li>`).join('') 。
return `<div className="card"/span>>
< div className="card-header" id=" heading">
< h2 className="mb- 0塌陷" data-toggle="塌陷" data- target="#collapse" aria-expanded="true" aria-controls="crapse"> ${item. name} </h2> ${item.
</div>/span>
< div id="collapse"/span> className="collapse" aria-labelledby="heading" data-parent="#accordionExample">
<div className="card-body"/span>>
<ul>/span>
${activeList}
</ul> ${activeList}
</div>/span>
</div>/span>
</div>`。
}).join('')。
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/320441.html
標籤:
