Почему некоторый данные из API обозначаются undefined?
Я взял API, что бы вывести список всех товаров оттуда через JS, у меня получилось, но первая карточка показывает картинку и кнопки действия внизу как undefiend, хотя остальные карточки нормально всё отображают. В чём может быть дело?
А так выглядит в браузере:
Вот мой код:
|
1 |
сonst store = fetch('https://fakestoreapi.com/products') store .then(res=>res.json()) .then(items=> { for(let item of items) { const catalogNode = document.querySelector('.catalog__container') const productContainer = document.createElement('div') productContainer.classList.add('product') catalogNode.append(productContainer) const productImageDiv = document.createElement('div') productImageDiv.classList.add('product__image-ibg') productImageDiv.append(productImageTag) productContainer.append(productImageDiv) const productImageTag = document.createElement('img') productImageTag.src = item.image const productPrice = document.createElement('div') productPrice.textContent = item.price productPrice.classList.add('product__price') productContainer.append(productPrice) const productTitle = document.createElement('div') productTitle.classList.add('product__title') productTitle.textContent = item.title productContainer.append(productTitle) const productActions = document.createElement('div') productActions.classList.add('product__actions') productActions.append(productPurchaseBtn) productActions.append(productAddToCartBtn) productContainer.append(productActions) const productPurchaseBtn = document.createElement('button') const productAddToCartBtn = document.createElement('button') productPurchaseBtn.classList.add('product__purchase') productAddToCartBtn.classList.add('product__add-to-cart') productPurchaseBtn.textContent = 'Purchase' productAddToCartBtn.textContent = 'Add to cart' } }) |
Дополнительно:
Содержание
Вы добавляете productImageTag, productPurchaseBtn и productAddToCartBtn в контейнер до того как создаёте их.
Я, правда не очень понимаю почему это вообще продолжает работать, а не падает. Подозреваю что вы умолчали про какой-нибудь webpack/babel/…
Ответы:
1) https://developer.mozilla.org/en-US/docs/Web/JavaS...
2) почему вы решили что item.image существует, впрочем тот же вопрос к item.price и т.д.
Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.
Оставить комментарий Отменить
Ответы
- Есть ответ! к записи Как уменьшить масштаб меньше 100% в Windows 10 (22H2)
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Как называется человек, который дизайн придумает для сайта и сверстает его?
- Есть ответ! к записи Можно ли установить Яндекс.Диск на АльтЛинукс?
- Есть ответ! к записи Картинки мутные только на сафари, есть выход?
- Есть ответ! к записи Keenetic. Как настроить SSTP клиент с сертификатом?
- Есть ответ! к записи Чем заменить executor в aiogram 3?
При получении данных из API, иногда может возникать ситуация, когда некоторые данные обозначаются как undefined. Это может быть вызвано несколькими причинами:
1. Отсутствие данных: Возможно, что запрашиваемые данные просто отсутствуют в ответе API. Это может быть связано с тем, что запрошенные данные не были предоставлены или не существуют в системе.
2. Ошибки в запросе: Неправильно сформулированный запрос к API может привести к тому, что некоторые данные не будут возвращены или будут обозначены как undefined. Проверьте правильность запроса и убедитесь, что вы запрашиваете нужные данные.
3. Проблемы с соединением: Иногда проблемы с соединением могут привести к тому, что данные не будут получены полностью или будут возвращены с ошибками. Убедитесь, что соединение с API стабильное и работает корректно.
Для того чтобы более точно определить причину появления undefined данных, рекомендуется проверить логи запросов к API, а также изучить документацию по API, чтобы убедиться, что запрашиваемые данные существуют и правильно запрашиваются.
Пример использования тега
В данном примере мы получаем данные из API и выводим имена элементов. Если имя отсутствует в данных, то вместо него будет выведено 'Undefined'.