Как внутри innerHTML вставить код javascript цикла?

Question

[DeniSidorenko]

Добрый день есть такой код

homeItem.innerHTML = `
    <div class="home-item__top">
      <div class="home-item__price">${priceItem} Р</div>
      <div class="home-item__logo">
        <img src="https://${carrierURL}" alt="">
      </div>
    </div>
    <div class="home-item__points">
      // Начало foreach
      <div class="home-point">
        <ul>
          <li><span>MOW – HKT</span><span>10:45 – 08:00</span>
          </li>
          <li><span>В пути</span><span>21ч 15м</span>
          </li>
          <li><span>1 пересадка</span><span>HKG</span>
          </li>
        </ul>
      </div>
      // Конец foreach
    </div>
  `;

Каким образом можно добавить цикл foreach дабы .home-point несколько раз повторялся в зависимости от количество итерации

Comments

[v3shin]

Сформировать циклом html и добавить его к нужному.

Answer 1

[Михаил]

`
<div class="home-item__points">
  ${arr.map((item) => `
  // Начало foreach
  <div class="home-point">
    <ul>
      <li><span>MOW – HKT</span><span>10:45 – 08:00</span>
      </li>
      <li><span>В пути</span><span>21ч 15м</span>
      </li>
      <li><span>1 пересадка</span><span>HKG</span>
      </li>
    </ul>
  </div>
  // Конец foreach
  `).join('')}
</div>
`

Comments

[DeniSidorenko]

Спасибо большое но еще один вопрос
Я добавил такой код

homeItem.innerHTML = `
      <div class="home-item__top">
        <div class="home-item__price">${priceItem} Р</div>
        <div class="home-item__logo">
          <img src="https://${carrierURL}" alt="">
        </div>
      </div>
      <div class="home-item__points">
        ${segments.map((item) =>  `
        <div class="home-point">
          <ul>
            <li><span>${item.origin} – ${item.destination}</span><span>${new Date(item.date).toLocaleTimeString("ru", {hour: '2-digit', minute:'2-digit'})} – 08:00</span>
            </li>
            <li><span>В пути</span><span>${getTimeFromMins(item.duration)}</span>
            </li>
            <li>
              <span>1 пересадка</span>
              <span>HKG</span>
            </li>
          </ul>
        </div>
        `).join('')}
      </div>
    `;

В месте где HKG это названия пересадки. Их я получаю через item.stops. Но не могу сделать вывод ведь они находится в массиве. Как правильно запустить еще один foreach в этот же foreach?

Заранее спасибо

[Михаил]

DeniSidorenko, так же

Answer 2

[inzeppelin]

Запишите все, что идет до "// Начало foreach" в переменную, типа
let markup = `...`

потом сделайте свой forEach и в каждой итерации конкатенируйте переменную "markup" с новым home-point, типа

[...].forEach(item => {
  markup += item;
})

И в самом конец добавьте закрывающий див, типа
markup += '</div>';

А потом просто сделайте так:
homeItem.innerHTML = markup;