Почему цикл for of при импорте/экспорте код не работает?

Question

[Deadorik]

Есть два примера кода. Через импорт/экспорт цикл for of не работает, не записывает значения в переменную item, если в подключать в лоб, то работает. Почему?

Не работает

import clearChipCart from "./modules/cart/clearChipCartActive.js";
import itogCost from "./modules/cart/itogCost.js";

const itemsCart = document.querySelector(".items_container");
const cardRow = document.querySelector(".card_row");
let count;

async function cartProduct() {
  //-------Генерация контента карточек через json------
  const data = await fetch("./assortiment.json"); // Получаю json в виде промисса
  const json = await data.json(); // Преобразую этот промисс в json

  for (item of json) {
    const cardHTML = `<div class="card_item" data-id="${item.id}">
        <img
          src="/source/popular/${item.img}"
          alt=""
          class="img_card_popular"
        />
        <div class="sale"><span class="number_sale">${item.sale}</span></div>
        <div class="card_text_container">
          <div class="price_text_item">
            <span class="price_card">${item.price}</span
            ><span class="sale_card">${item.old_price}</span>
          </div>
          <div class="card_description">
            ${item.description}
          </div>
        </div>
        <div class="card_hover none">
          <a data-cart href="#" class="btn_cart"
            ><img src="/source/icons/icons_menu/cart.svg" alt=""
          /></a>
          <a href="#" class="icon_favorite"
            ><img src="/source/popular/heart.svg" alt=""
          /></a>
        </div>
      </div>`;

    cardRow.insertAdjacentHTML("beforeend", cardHTML);
  }

Такой вариант работает корректно

const itemsCart = document.querySelector(".items_container");
const cardRow = document.querySelector(".card_row");
let count;

async function cartProduct() {
  //-------Генерация контента карточек через json------
  const data = await fetch("./assortiment.json"); // Получаю json в виде промисса
  const json = await data.json(); // Преобразую этот промисс в json

  for (item of json) {
    const cardHTML = `<div class="card_item" data-id="${item.id}">
        <img
          src="/source/popular/${item.img}"
          alt=""
          class="img_card_popular"
        />
        <div class="sale"><span class="number_sale">${item.sale}</span></div>
        <div class="card_text_container">
          <div class="price_text_item">
            <span class="price_card">${item.price}</span
            ><span class="sale_card">${item.old_price}</span>
          </div>
          <div class="card_description">
            ${item.description}
          </div>
        </div>
        <div class="card_hover none">
          <a data-cart href="#" class="btn_cart"
            ><img src="/source/icons/icons_menu/cart.svg" alt=""
          /></a>
          <a href="#" class="icon_favorite"
            ><img src="/source/popular/heart.svg" alt=""
          /></a>
        </div>
      </div>`;

    cardRow.insertAdjacentHTML("beforeend", cardHTML);
  }

Comments

[Сергей delphinpro]

Что в консоли по этому поводу видно?

[Deadorik]

Сергей delphinpro, ссылается на переменную item
"Uncaught (in promise) ReferenceError: item is not defined at cartProduct (cart_04.js:13:8)"

Answer 1

[Сергей delphinpro]

ссылается на переменную item
"Uncaught (in promise) ReferenceError: item is not defined at cartProduct (cart_04.js:13:8)"

Deadorik, ну вот и делайте вывод. Not defined - не определена. Значит нужно определить переменную, прежде чем использовать.

Почему так происходит?
Потому что в стандарте чётко написано

Module code is always strict mode code.

Пока не используете модули, js выполняется в нестрогом режиме. Можно не объявлять переменные перед использованием. В модулях уже всё по-взрослому: сначала объявили переменную, потом ее использовали.

for (let item of json) {

А вообще, сразу и всегда привыкайте писать в строгом режиме, потому что есть еще места, где код всегда так выполняется. Например, в объявлении класса.

Comments

[Deadorik]

Спасибо

Answer 2

[smigles]

item надо объявить:

for (const item of json) {
    ...
}