Вывод в модальное окно данных, полученных из запроса get fetch

Question

по запросу GET FETCH я получаю данные с ссылками на сайты, где можно посмотреть кино. Моя задача в открывшееся модальное окно их отразить в аккуратной колонке - САЙТ: ССЫЛКА. ейчас получается вывести все в консоль, а вот в модальное окно попадает только последняя ссылка из цикла. Как поправить функцию, чтобы и в модальном окне отражались все ссылки?

введите сю

//  запрос на получение URLs выбранного фильма

function getMovieURLs(URL) {
  fetch(URL, {
    method: "GET",
    headers: {
      "X-API-KEY": "99116293-2534-4b37-b131-ce5f5c970a85",
      "Content-Type": "application/json",
    },
  })
    .then((res) => res.json())
    .then((respData) => {
      closePopup(popupOpen);
      generatePopupUrl(respData);
    })
    .catch((error) => {
      console.log("Ошибка при выполнении функции: " + error);
    });
}

// вешаем слушатель на получение URLs выбранного фильма

movieUrls.addEventListener("click", (e) => {
  e.preventDefault();
  // console.log('click')
  // console.log(filmId)
  const apiMovieUrls = `${API_URL_URLS}${filmId}${"/external_sources?page=1"}`;
  console.log(apiMovieUrls);
  getMovieURLs(apiMovieUrls);
});

// функция запуска модального окна

function generatePopupUrl(data) {
  for ( i = 0; i < data.items.length; i++ ) {
  stopScrolling.classList.add("stop-scrolling");
  QQQ(data);
  openPopup(popupOpenURL);
}
function QQQ(data) {
  for ( i = 0; i < data.items.length; i++ ) {
      popupPlatform.textContent = `${data.items[i].platform}`;
      popupMovieUrl.href = `${data.items[i].url}`;
      popupMovieUrl.textContent = `${data.items[i].url}`;
      console.log(popupPlatform.textContent, popupMovieUrl.href, popupMovieUrl.textContent);
    // ???? как вывести все в модальное окно???
  }
}

        <div class="popup popup__type-urls">
            <div class="popup__content">
                <h2 class="popup__title">Смотрите фильм по ссылке</h2>
                <ul class="popup__movie-urls">
                    <li class="li popup__platform"></li>
                    <li class="li popup__urlword">Сайт: <a class="popup__movieurl" target="_blank" href="#">URL</a></li>
                </ul>
                <button type="button" class="popup__close"></button>
            </div>
        </div>

да код

Answer 1

Самый простой вариант. Накопить весь контент и вставить в нужное место:

function QQQ(data) {
  let html = '';
  
  for ( let i = 0; i < data.items.length; i++ ) {
    html += `
       <li class="li popup__platform">${data.items[i].platform}</li>
       <li class="li popup__urlword">Сайт: ${data.items[i].url}<a class="popup__movieurl" target="_blank" href="${data.items[i].url}">URL</a></li>
    `;    
  }
  
  document.querySelector('.popup__movie-urls').innrHTML = html;
}

БЛОГ НА HUSL

Вывод в модальное окно данных, полученных из запроса get fetch

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