如何在 JS 模板文字中將 object 的字符串數組顯示為跨度？

Question

我有一組對象。 在每個 object 中都有一個value字符串數組的key （每個對象中字符串的數量會發生變化）。 如何在JS模板文字中將數組的每個字符串顯示為<span> ？

如果數組包含 2 個字符串，則應顯示 2 個<span> ，如果包含 3 個字符串，則應顯示 3 個<span>等。

代碼：

let items = [{
  "id": 1,
  "name": "item 1",
  "captionTags": ["Stills", "Animation", "Virtual Reality"]
},
{
  "id": 2,
  "name": "item 2",
  "captionTags": ["Configurator", "Animation", "Application"]
},
{
  "id": 3,
  "name": "item 3",
  "captionTags": ["Stills", "Configurator"]
}];

function displayItems() {
  let itemsContainer = document.querySelector('.items-container');
  itemsContainer.innerHTML = '';
  items.forEach(item => {

    itemsContainer.innerHTML += `
        <div class="items-wrapper">
        <div class="item-caption">
            <span class="item-caption-col">
                <h3>${item.name}</h3>
                <span class="item-caption-tags">
                I WANT TO DISPLAY HERE EACH ELEMENT OF CAPTION TAGS ARRAY IN EACH OBJECT 
               AS SPANS 
                </span>
            </span>
        </div>
    </div>`
  });
};


displayItems();

預先感謝您的幫助！

Answer 1

map在項目上， map在返回字符串文字的標簽上。 但是因為map返回一個新數組，所以確保在末尾join它連接成一個字符串。

 const items=[{id:1,name:"item 1",captionTags:["Stills","Animation","Virtual Reality"]},{id:2,name:"item 2",captionTags:["Configurator","Animation","Application"]},{id:3,name:"item 3",captionTags:["Stills","Configurator"]}]; function displayItems(items) { return items.map(item => { const captions = item.captionTags.map(tag => `<span>${tag}</span>`).join(''); return ( `<h3>${item.name}</h3><div>${captions}</div>` ); }).join(''); } document.querySelector('div').innerHTML = displayItems(items);

 <div />

Answer 2

嘗試這個：

 let items = [{ "id": 1, "name": "item 1", "captionTags": ["Stills", "Animation", "Virtual Reality"] }, { "id": 2, "name": "item 2", "captionTags": ["Configurator", "Animation", "Application"] }, { "id": 3, "name": "item 3", "captionTags": ["Stills", "Configurator"] }]; function displayItems() { let itemsContainer = document.querySelector('.items-container'); itemsContainer.innerHTML = ''; items.forEach(item => { itemsContainer.innerHTML += ` <div class="items-wrapper"> <div class="item-caption"> <span class="item-caption-col"> <h3>${item.name}</h3> `; item.captionTags.forEach(tag => { itemsContainer.innerHTML +=`<span class="item-caption-tags"> ${tag} </span>` }) itemsContainer.innerHTML +=` </span> </div> </div>` }); }; displayItems();

 span.item-caption-tags { border: 1px solid black }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="items-container" > </div>

css僅供參考