Как правильно использовать метод в классе ES6 в данном случае?

Question

[Illia T]

Создаю экземпляр класса посредством перебора ранее указанного массива с данными, заполняя в index.html таким образом список строками (товарами). Нужно организовать функционал заказа и добавления в корзину (чисто фронтэнд, бэка не нежно), т.е. в каждой строке есть 2 кнопки, "заказать" и "в корзину", функционал которых я и пытаюсь зашить в методы класса. Попытался добавить метод toBuy(), но что-то делаю не так, и с вызовом метода что-то не получилось ...

//list of products

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

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

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

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


        ]

        // create product class

        class Product {
            constructor(id, link, title, price){
                this.id = id;
                this.link = link;
                this.title = title;
                this.price = price;
            }

            productAdder(){
                document.querySelector('ul').insertAdjacentHTML('beforeend',

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

            toBuy(){
                querySelector(`.js-order-${this.id}`).addEventlistener('click', function(){
                    console.log('it works');
                })
            };
            addToCart(){};
        }


        // insert products into the page

products.forEach(function(item){
    let newProduct = new Product(item.id, item.link, item.title, item.price).productAdder();
    newProduct.toBuy(); 
    });

Последняя строка вызывает ошибки (без неё список формируется) в ней и через 1 строку вверх.
Думаю, что и в toBuy() как-то не верно организовано (`.js-order-${this.id}`) ...

PS

Ошибки:

API.js:83 Uncaught TypeError: Cannot read property 'toBuy' of undefined
at API.js:83 (это для newProduct.toBuy();)
at Array.forEach ()
at API.js:81 (это для products.forEach(function(item){...} )

Так же foreach выдаёт только первый элемент

Comments

[Шохрух Шаймардонов]

Последняя строка вызывает ошибки (без неё список формируется) в ней и через 1 строку вверх

А остальным нужно колдовать, что за ошибка там?
Запомните, с таким отношением к людям вы не получите желаемого

[Illia T]

Шохрух Шаймардонов, я думал, что описания моей цели и путей её достижения, в купе с листингом, достаточно. Сейчас выложу ошибку.

[Шохрух Шаймардонов]

illiatovpeko, достаточно выложить все, что непосредственно касается вопроса.
Да вы молодец, что верно задали вопрос, выложили плоды ваших попыток, и указали, что в итоге получаете (ошибку), но не указали что именно

[Illia T]

API.js:83 Uncaught TypeError: Cannot read property 'toBuy' of undefined
at API.js:83 (это для newProduct.toBuy();)
at Array.forEach ()
at API.js:81 (это для products.forEach(function(item){ ...)

Так же foreach выдаёт только первый элемент.

[Danila]

let newProduct = new Product().productAdder();
в переменную newProduct ты записываешь не класс, а результат метода productAdder(), который ничего не возвращает
а потом пытаешься вызвать метод из этого результата

[Illia T]

Данила,

productAdder(){
                document.querySelector('ul').insertAdjacentHTML('beforeend',

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

Я не понял, что ещё должно вернуться.

[Danila]

твой класс - тебе решать что твои методы должны возвращать, я лишь указал где ошибка
ты вызываешь метод toBuy() у undefined
либо записывай в newProduct класс и только потом вызывай свои методы

let newProduct = new Product(item.id, item.link, item.title, item.price);
newProduct.productAdder();
newProduct.toBuy();

либо возвращай ссылку на класс при вызове productAdder()
return this;

[Danila]

и метод querySelector должен вызываться у document

querySelector(`.js-order-${this.id}`).addEventlistener('click', function(){
                    console.log('it works');
                })

[Illia T]

Данила, да это я уже присёк

Answer 1

[Illia T]

Сейчас отделил productAdder() от

newProduct = new Product(item.id, item.link, item.title, item.price)

но проблема пока что Не решена:

products.forEach(function(item){
    let newProduct = new Product(item.id, item.link, item.title, item.price);
    newProduct.productAdder();
    newProduct.toBuy();
    
    });

Answer 2

[Ice]

Зачем вам классы и куча их экземпляров, когда вы обращаетесь с ними как с функцией, а не методами класса?
Вам достаточно одного экземпляра класса, закидывать массив в productAdder, на кнопки вешать onClick event c необходимыми методами и отображать.

Comments

[Illia T]

Я думал так будет удобнее организовать попапы для этих двух кнопок. Было задание организовать простенькое api, вот и подумал, что следует делать так.

Answer 3

[Егор Живагин]

В productAdder, в самом конце нужен return this;

Comments

[Illia T]

Спасибо за совет, вернусь домой и попробую.