Как вытащить все значения из json через key?

Question

[julith]

Функция должна при наведении выводить все категории объекта, в том числе несколько изображений из категории images
Пытаюсь перебрать циклом, в чем ошибка?

async function getResponse() {
    let response = await fetch('https://dummyjson.com/products') 
    let jsonList = await response.json()
    let list = document.querySelector('.products')
    let key
    let elements = jsonList.products
    elements = elements.splice(0, 3)

    for (key in elements) {
        function getPictures() { //вывод ключей на картинки
            for (let i = 0, length = elements.images[key].length; i < length; i++) {
                return(elements.images[i]);
            }
        }
        list.innerHTML += 
        `<li class="item">
            <h5 class="small_panel">${elements[key].title}</h5>
                <div class="full_panel">
                    <img src="${elements[key].images[getPictures()]}" alt="${elements[key].description}"></img>
                    <p>brand: ${elements[key].brand}</p>
                    <p>category: ${elements[key].category}</p>
                    <p>${elements[key].description}</p>
                    <p>discount percentage: ${elements[key].discountPercentage} %</p>
                    <p>price: ${elements[key].price} usd</p>
                    <p>rating: ${elements[key].rating}</p>
                    <p>stock: ${elements[key].stock}</p>
            </div>
        </li>`
    }
}


getResponse()

Answer 1

[Teleweb developer]

Вот код чтобы вывести ваши елементы:

async function getResponse() {
    let response = await fetch('https://dummyjson.com/products') 
    let jsonList = await response.json()
    let list = document.querySelector('.products')
    let key
    let elements = jsonList.products
    elements = elements.splice(0, 3)

    for (key of elements) {
        list.innerHTML += 
        `<li class="item">
            <h5 class="small_panel">${key.title}</h5>
                <div class="full_panel">
                    <img src="${key.thumbnail}" alt="${key.description}"></img>
                    <p>brand: ${key.brand}</p>
                    <p>category: ${key.category}</p>
                    <p>${key.description}</p>
                    <p>discount percentage: ${key.discountPercentage} %</p>
                    <p>price: ${key.price} usd</p>
                    <p>rating: ${key.rating}</p>
                    <p>stock: ${key.stock}</p>
            </div>
        </li>`
    }
}


getResponse()

Comments

[julith]

данный код все равно выводит только одну картинку, которая лежит в пути thumbnail, в то время как в пути images массив из нескольких ссылок на изображения

Answer 2

[Юрий Горбунов]

В массиве images не там key стоит в функции getPictures ну и в итоге у вас по коду вы выводите одно изображение, а вам надо все?

Предлагаю так с вашей функцией getPictures(), которая теперь формируется набор этих изображений по продукту и затем ее добавляем в шаблон вывода

А ошибка была в этой части
elements[key].images.length

key у elements, а не у images

async function getResponse() {
            let response = await fetch('https://dummyjson.com/products')
            let jsonList = await response.json()
            let list = document.querySelector('.products')
            let key
            let elements = jsonList.products
            elements = elements.splice(0, 3)

            for (key in elements) {
                function getPictures() { //вывод ключей на картинки
                    let images = ''
                    for (let i = 0, length = elements[key].images.length; i < length; i++) {
                        images += `<img src="${elements[key].images[i]}" alt="${elements[key].description}" />`
                    }
                    return images
                }
                list.innerHTML +=
                    `<li class="item">
                      <h5 class="small_panel">${elements[key].title}</h5>
                          <div class="full_panel">
                              ${getPictures()}
                              <p>brand: ${elements[key].brand}</p>
                              <p>category: ${elements[key].category}</p>
                              <p>${elements[key].description}</p>
                              <p>discount percentage: ${elements[key].discountPercentage} %</p>
                              <p>price: ${elements[key].price} usd</p>
                              <p>rating: ${elements[key].rating}</p>
                              <p>stock: ${elements[key].stock}</p>
                      </div>
                  </li>`
            }
        }


        getResponse()