0

Есть json файл. Из него надо сформировать блоки с информацией. Но не могу сообразить как вывести ul из ключа charact.

codepen

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>

1 ответ 1

0

Вы можете заменить forEach на map и возвращать html строку, раз используете innerHTML:

item.charact.map(elem => '<li>' + elem + '</li>')
2
  • хм, не пришло в голову, спасибо. А как можно убрать запятые после каждого пункта ? Commented 14 апр. 2023 в 19:09
  • 1
    map вернет массив, посмотрите на метод ,jon() Commented 14 апр. 2023 в 19:45

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.