如何在 JS 模板文字中将对象的字符串数组显示为跨度?
How can I display an array of strings of an object as spans in a JS template literal?
我有一组对象。在每个对象中都有一个 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();
提前感谢您的帮助!
试试这个:
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
仅供参考
map
over the items, and map
over the tags returning string literals. But because map
returns a new array just make sure you 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 />
我有一组对象。在每个对象中都有一个 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();
提前感谢您的帮助!
试试这个:
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
仅供参考
map
over the items, and map
over the tags returning string literals. But because map
returns a new array just make sure you 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 />