Главная arrow icon Вопросы arrow icon Технологии arrow icon JavaScript,Ajax,HTML arrow icon Выдаёт ошибку Cannot read properties of…

Выдаёт ошибку Cannot read properties of undefined (reading 'product_name') - вопрос №4741114

Ресурс, из которого берутся данные, находится в константе api и методе _getProduct (на всякий случай вот ссылка: raw.githubusercontent.com/GeekBrainsTutorial/online-store-api/master/responses/getBasket.json). Я пытаюсь сделать корзину для товаров. Пока просто хотел научиться выводить товары в корзину, а потом уже сделать обработчик клика чтобы выбирать нужный товар. Но есть большая проблема. В классе ElemBasket в строке this.title=product.product_name; выдает ошибку «Uncaught TypeError: Cannot read properties of undefined (reading 'product_name')». Если кто знает как ее устранить, напишите пожалуйста код с исправлениями, а так же поясните что я не так сделал. Пробовал делать точки остановки в инструменте разработчика в браузере. В строке, где возникает ошибка, вся нужная информация передается, но так же по не понятной мне причине сразу же возникает эта злосчастная ошибка.

const API = 'https://raw.githubusercontent.com/GeekBrainsTutorial/online-store-api/master/responses' class ProductsList { constructor(container = '.products') { this.container = container; this.goods = []; this._getProducts() .then(data => { this.goods = data.contents; this.render(); }); }
render() { const block = document.querySelector(this.container); for (let product of this.goods) { const productObj = new ProductItem(product); let elemBasket = new ElemBasket(product); // this.allProducts.push(productObj); block.insertAdjacentHTML('beforeend', productObj.render()); } }
_getProducts() { return fetch(`${API}/getBasket.json`) .then(result => result.json()) .catch(error => { console.log(error); }); }
/* calcSum() { return this.allProducts.reduce((accum, item) => accum += item.price, 0); } */
}

class ProductItem { constructor(product, img = 'https://via.placeholder.com/200x150') { this.title = product.product_name; this.price = product.price; this.id = product.id_product; this.img = img; }
render() { return `<div class=«product-item» data-id="${this.id}"> <img src="${this.img}" alt=«Some img»> <div class='desc'> <h3>${this.title}</h3> <p>${this.price}</p> <button class=«buy-btn»>Купить</button> </div> </div>` } }
let list = new ProductsList(); list.render();

class ElemBasket { // получение верстки одного товара constructor(product) { this.title = product.product_name; this.price = product.price; this.id = product.id_product; }
render() { return `<div class=«basketBody»> <div class=«basketElement»> <p>Name</p> <p>Price</p> </div> <div class=«basketElement»> <p class=«name»>${this.title}</p> <p class=«price»>${this.price}</p> </div> </div>`
/*function ClickHandler() { basketEl.style.display = basketEl.style.display === 'none'? 'block': 'none'; } btn.addEventListener('click', ClickHandler); */ }
} //let elemBasket = new ElemBasket();

// класс «корзина» class Basket {
// вывести все товары корзины. В этом методе вызываем метод render класса ElemBasket render() { const headerEl = document.querySelector('header'); let elemBasket = new ElemBasket(); headerEl.insertAdjacentHTML('beforeend', elemBasket.render()); // сделать оработчик клика для кнопки «Корзина» }
//добавить товар в корзину addGood(elemBasket) { const productObj = new ElemBasket(product); elemBasket.render(productObj) }
// удалить товар из корзины removeGood() {
}
//изменить товар в корзине changeGood() } }
let basket = new Basket(); basket.render();
Иван
30.04.22
Технологии / JavaScript,Ajax,HTML
0 ответов
Ответов пока нет

Alexander
от 500 p.
Рейтинг: 17 568
4-й в Технологиях
Читать ответы

✯ Анна ✯
от 0 p.
Рейтинг: 2 926
6-й в Технологиях
Читать ответы

Павел Викторович
от 100 p.
Рейтинг: 570
9-й в Технологиях
Читать ответы
Посмотреть всех экспертов из раздела Технологии > JavaScript,Ajax,HTML
Похожие вопросы
Пользуйтесь нашим приложением Доступно на Google Play Загрузите в App Store
  • карты visa
  • карты master card
  • карты maestro
  • карты МИР
Мы используем файлы cookie. Пользуясь сайтом, вы принимаете условия нашего соглашения. Принять Детальнее