[英]How can I display an array of strings of an object as spans in a JS template literal?
I have an array of objects.我有一组对象。 In each object there is a
key
with a value
of an array of strings (the number of strings changes in each object).在每个 object 中都有一个
value
字符串数组的key
(每个对象中字符串的数量会发生变化)。 How can I display each string of the array as <span>
in a JS
template literal?如何在
JS
模板文字中将数组的每个字符串显示为<span>
?
If the array contains 2 strings, than 2 <span>
should appear, If 3 strings, 3 <span>
etc.如果数组包含 2 个字符串,则应显示 2 个
<span>
,如果包含 3 个字符串,则应显示 3 个<span>
等。
Code:代码:
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();
Thank you in advance for your help!预先感谢您的帮助!
map
over the items, and map
over the tags returning string literals. map
在项目上, map
在返回字符串文字的标签上。 But because map
returns a new array just make sure you join
it up into a string at the end.但是因为
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 />
Try this:尝试这个:
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
is for example only css
仅供参考
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.