如何在 JS 模板文字中将对象的字符串数组显示为跨度？答案

【问题标题】：How can I display an array of strings of an object as spans in a JS template literal?如何在 JS 模板文字中将对象的字符串数组显示为跨度？
【发布时间】：2021-10-21 23:47:42
【问题描述】：

我有一个对象数组。在每个对象中都有一个key 和一个字符串数组的value（每个对象中字符串的数量会发生变化）。如何在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();

提前感谢您的帮助！

【问题讨论】：

只需遍历item.captionTags，将字符串包装在<span> 中并附加它们？

标签： javascript html arrays javascript-objects template-literals

【解决方案1】：

试试这个：

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 仅作为示例

【讨论】：

【解决方案2】：

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);

&lt;div /&gt;

【讨论】：