Дом манипуляции и выборка в javascript - PullRequest
Новая
       10

Дом манипуляции и выборка в javascript

0 голосов
/ 07 марта 2020

Я пытаюсь использовать fetch для получения данных из API, l oop через данные и их рендеринга, поскольку я динамически создаю элемент и атрибут html. вот мой код 


    fetch('https://get_products')
        .then((response) => {
            return response.json();
        })
        .then((item) => {
            data = item.data
            console.log(data)

            if (data && data.length > 0) {
                data.map((item) => {
                    console.log(item)
                    var store = document.getElementsByClassName('Store')
                    var ul = document.createElement("ul").classList.add("ProductGrid")
                    var li = document.createElement("li").classList.add("ProductGrid_item")
                    var a = document.createElement("a")
                    var divCard = document.createElement("div").classList.add("ProductCard")
                    var divImg = document.createElement("div").classList.add("ProductCard_image")
                    var img = document.createElement("img").src = item.photo
                    var divInfo = document.createElement("div").classList.add("ProductCard_info")
                    var h5 = document.createElement("h5").classList.add("ProductCard_name")
                    var name = document.createTextNode(item.name)
                    var p = document.createElement("p").classList.add("ProductCard_price")
                    var price = document.createTextNode(item.proce)

                    store.appendChild(ul)
                    li.appendChild(a)
                    a.appendChild(divCard)
                    divCard.appendChild(divImg)
                    divImg.appendChild(img)
                    divCard.appendChild(divInfo)
                    divInfo.appendChild(h5)
                    divInfo.appendChild(p)
                    p.appendChild(price)
                    h5.appendChild(name)
                })

            }

    })

, когда я запускаю файл JavaScript, у меня ошибка в моей консоли 

index.js:76 Uncaught (in promise) TypeError: store.appendChild is not a function
    at index.js:76
    at Array.map (<anonymous>)
    at index.js:60

не уверен, что я делаю неправильно.

1 Ответ

0 голосов
/ 07 марта 2020

вам нужно получить элемент, потому что вся эта функция возвращает массивы элементов 

var store = document.getElementsByClassName('Store')[0];

во всех остальных случаях также 1-й элемент или l oop collection

...