Есть json файл. Из него надо сформировать блоки с информацией. Но не могу сообразить как вывести ul из ключа charact.
const objects = [
{
"id": "object-1",
"objectName": "Новый современный жилой комплекс со всеми удобствами в районе Авсаллар",
"price": "от 78,000 €",
"charact": [
"Object 1",
"Object 2",
"Object 3"
]
},
{
"id": "object-2",
"objectName": "Проект жилого комплекса отельного типа в районе Авсаллар",
"price": "от 80,000 €",
"charact": [
"Object 4",
"Object 5",
"Object 6"
]
},
{
"id": "object-3",
"objectName": "Новый проект элитного бутик-комплекса в районе Махмутлар",
"price": "от 82,500 €",
"charact": [
"Object 7",
"Object 8",
"Object 9"
]
}
]
const objectsWrapper = document.querySelector('.objects__box')
function renderObjectsPreview(){
objectsWrapper.innerHTML = '';
let li = document.createElement('li')
objects.forEach(item => {
let objectPreview = document.createElement('article')
objectPreview.innerHTML = `
<div class="object-preview" data-id="${item.id}">
<div class="object-preview__info">
<h3 class="object-preview__name">${item.objectName}</h3>
<div class="object-preview__price"> <span>${item.price}</span></div>
<ul>
${
item.charact.forEach(elem => {
console.log(elem)
li.innerText = elem
})
}
${li}
</ul>
</div>
</div>
`
objectsWrapper.appendChild(objectPreview)
})
}
renderObjectsPreview()
.objects__box{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.object-preview{
width: 100%;
height: 300px;
border: 1px solid;
padding: 10px;
}
<div class="objects__box"></div>