Создание раскрывающегося списка, возвращающего информацию из API. На чистом js

Question

Мне нужно что бы по нажатию на эпизод списком возвращались корабли, которые в этом эпизоде встречались. Я могу вернуть списком эпизоде, задать эвент по клику, но я решительно не понимаю, как вложить в эпизоды список кораблей.

Нужно ли создавать, например, li class = ships в уже существующем ul. На стаке мне просто кинули кусок кода и сказали его рефакторнуть - сломался буквально сразу на клик хендлере и тишина.

'use strict'
const list = document.querySelector('.list');

function test() {
  return fetch('https://swapi.dev/api/films/', {
    method: 'GET'
  });
}
list.addEventListener('click', event => {
  console.log('TEST');
  alert("TEST");
});
test()
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    data.results.forEach(function(episode) {
      const ul = document.createElement('ul');
      ul.innerHTML = episode.title;
      list.append(ul);
    })
  })

.list {
  cursor: pointer;
}

<ul class="list"></ul>

Answer 1

const list = document.querySelector('.list');

function test() {
  return fetch('https://swapi.dev/api/films/', {
    method: 'GET'
  });
}
test()
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    data.results.forEach(function(episode) {
      const ul = document.createElement('ul');
      ul.classList.add('episode')
      const ul_inner = document.createElement('ul');
      ul_inner.classList.add('starships');
      ul_inner.classList.add('episode-'+episode.episode_id)
      ul_inner.classList.add('hidden');
      episode.starships.forEach((starship)=>{
      let episode_id = episode.episode_id;
        fetch('https://'+starship.substr(7),{method:'GET',redirect:'follow'}).then((r)=>r.json())
        .then(d=>{
        let li = document.createElement('li')
        li.innerHTML = d.name;
        document.querySelector('.episode-'+episode_id).append(li);
        })
      });
      ul.innerHTML = episode.title+ul_inner.outerHTML;
      list.append(ul);
    })
    document.querySelectorAll('.episode').forEach(elem=>{
     elem.addEventListener('click', event => {
  event.target.querySelector('.starships').classList.toggle('hidden');
});
    })
  })

.list {
  cursor: pointer;
}
.hidden{
  display:none;
}

<ul class="list"></ul>

что если так?

БЛОГ НА HUSL

Создание раскрывающегося списка, возвращающего информацию из API. На чистом js

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