<div id="app">
</div>
.badge {
background: red;
color: #fffff;
}
const app = document.getElementById('app');
let data = [{
"type": "a",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
},
{
"type": "b",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
},
{
"type": "c",
"array": ["1","2","3","4","5"],
"array2": ["6","7","8","9","10"]
}];
let str = '';
data.forEach((item, index) => {
str += `
<div>item:${item.type}</div> <br>
<div>array:${item.array.map((itemArray) => {
return `<span class="badge">${itemArray}</span>`
})}</div><br>
<div>array2:${item.array2.map((itemArray2) => {
return `<span class="badge">${itemArray2}</span>`
})}</div>`;
})
app.innerHTML = str;
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.