В начале обхода массива метод ForEach не видит 1-й элемент

Question

Почему при обходе массива методом ForEach при первой итерации не считываются данные из 1-го объекта элемента массива? Считывается только со 2-й итерации. В результате выводится только три ТемплейтЭлемента вместо четырёх! (Должна быть ещё 4-я карточка)

const goodsTypes = [
  {
    id: "1",
    title: "ЯЩИКИ",
    link: "1",
    description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
  },
  {
    id: "2",
    title: "ПОДСТАВКИ",
    link: "2",
    description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
  },
  {
    id: "3",
    title: "ШКАФЫ",
    link: "3",
    description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
  },
  {
    id: "4",
    title: "ШКАФЫ",
    link: "4",
    description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
  },
]


const elementTemplate = document.querySelector("#goods-template").content;
const elementTitle = elementTemplate.querySelector(".goods__title");
const elementParagraph = elementTemplate.querySelector(".goods__paragraph");
const elementImage = elementTemplate.querySelector(".goods__image");
const elementPlace = document.querySelector(".goods__types");

function createTypesOfGoods(title, link, description) {
  const cardElement = elementTemplate
    .querySelector(".goods__container")
    .cloneNode(true);

  elementTitle.textContent = title;
  elementImage.src = link;
  elementImage.alt = title;
  elementParagraph.textContent = description;

  // const chooseButton = cardElement.querySelector('.elements__button');
  // chooseButton.addEventListener('click', chooseCard);

  return cardElement;
}

function getTypeOfGoods() {
    goodsTypes.forEach(function ({ title, link, description }) {
      const typeNew = createTypesOfGoods(title, link, description);
      console.log(typeNew);
      elementPlace.append(typeNew);
    });
  }
  
  getTypeOfGoods()

   <body class="body">
   <section class="goods__types" aria-label="Виды продукции"></section>
      <template id="goods-template">
      <article id="tumbs" class="goods__container">
        <h2 class="goods__title"></h2>
        <div class="goods__box">
          <img src="" alt="" class="goods__image">
          <div>
            <p class="goods__paragraph"></p>
          </div>
        </div>
      </article>
  </template>

</body>

Answer 1

Мне кажется, что ваш подход c созданием констант 'elementTitle, elementParagraph, elementImage' снаружи (вне функции) в корне неверен. Как бы это вам понятнее объяснить, но получается, что вы их сначала задали по отношению к шаблону, а потом внутри функции 'createTypesOfGoods' при первом проходе обращаетесь не к новоклонированному объекту, а к старой сущности этих значений. Вот потому на втором проходе forEach они и начинают работать.

Давайте я попробую слегка окультурить текущий код до работоспособного, а вы уж сами смотрите.

    const goodsTypes = [
      {
        id: "1",
        title: "ЯЩИКИ",
        link: "1",
        description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
      },
      {
        id: "2",
        title: "ПОДСТАВКИ",
        link: "2",
        description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
      },
      {
        id: "3",
        title: "ШКАФЫ",
        link: "3",
        description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
      },
      {
        id: "4",
        title: "ШКАФЫ",
        link: "4",
        description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
      },
    ]

    const elementTemplate = document.querySelector("#goods-template").content;
    const elementPlace = document.querySelector(".goods__types");
    
    function createTypesOfGoods(title, link, description) {   
      const cardElement = elementTemplate.cloneNode(true);
      cardElement.querySelector(".goods__title").textContent = title;
      const elementImage = cardElement.querySelector(".goods__image");
      elementImage.src = link;
      elementImage.alt = title;
      cardElement.querySelector(".goods__paragraph").textContent = description;
      // const chooseButton = cardElement.querySelector('.elements__button');
      // chooseButton.addEventListener('click', chooseCard);
      return cardElement;
    }

    function getTypeOfGoods() {
       goodsTypes.forEach(function ({ title, link, description }) {
        const typeNew = createTypesOfGoods(title, link, description);
        elementPlace.append(typeNew);
      });
    }
    getTypeOfGoods();

  <section class="goods__types" aria-label="Виды продукции"></section>

  <template id="goods-template">
    <article id="tumbs" class="goods__container">
      <h2 class="goods__title"></h2>
      <div class="goods__box">
        <img src="" alt="" class="goods__image">
        <div>
          <p class="goods__paragraph"></p>
        </div>
      </div>
    </article>
  </template>

БЛОГ НА HUSL

В начале обхода массива метод ForEach не видит 1-й элемент

Ответы (1 шт):