Почему при попытке перебрать объект, вместо содержимого выводимых элементов выводит undefind?

Question

[Illia T]

Почему содержимое Не определено?

До этого перебирал обычный массив, всё работало (массив состоял из тех же блоков в {...} скобках, просто не было ключей). Решил поменять на объект, в связи с изменением общей архитектуры. Ну и метод перебора взял соответствующий.

let products = new Object();

products = {
        
    baden: {
        title: "Диван Баден-Баден",
        price: "20 000 рублей",
        link: "src/img/baden-baden.jpg",
        id: "baden-baden"
    },

    dubay: {
        title: "Диван Дубай",
        price: "19 000 рублей",
        link: "src/img/dubay.jpg",
        id: "dubay"
    },

    lion: {
        title: "Диван Лион",
        price: "21 000 рублей",
        link: "src/img/lion.jpg",
        id: "lion"
    },

    stephani: {
        title: "Диван Стефани",
        price: "40 000 рублей",
        link: "src/img/stephani.jpg",
        id: "stephani"
    },


}

for (key in products){
    
    document.querySelector('ul').insertAdjacentHTML('beforeend',

    `<li>
    <div class="item ${key.id}">
        <img src="${key.link}" alt="" class="img1">
        <div class="description">
            <h3 class="title">${key.title}</h3>
            <p class="price">${key.price}</p>
        </div>
        <div class="buttons">
            <button class="order" onclick="toOrder(this.parentElement.parentElement)">Заказать</button>
            <button class="cart" onclick="toCart(this.parentElement.parentElement)">В корзину</button>
        </div>
    </div>
</li>`)
}

Comments

[RAX7]

<div class="item ${products[key].id}">

Answer 1

[Артур]

for (key of Object.values(products)){

Answer 2

[Игорь Стубарев]

Потому что объекты итерируются по ключам, значение можно получить по products[key]