Вывод результатов из fetchapi в html

Question

У меня есть этот код, который возвращает воспроизводимые в настоящее время песни на онлайн-радио. У меня проблема с выводом результатов в html.Когда я сохраняю результаты, как показано ниже, я получаю 3 результата, как и должен.Но когда я отображаю этот контент в HTML, я просто получаю один результат.У меня вопрос, как мне просмотреть результаты и вывести их на страницу

    function getSongs(){
let url = "http://socket.radionula.com/playlist" ;
let API_KEY = '';
let songCount = 1;
let watchVideoURL = 'https://www.youtube.com/watch?v=';
        fetch(url)
        .then(res => res.json())
        .then(data => {
            Object.keys(data).forEach(function(key){
                let songtitle =  data[key].currentSong.title
                let songartist = data[key].currentSong.artist
                console.log(`Currently on ${key} :${songartist}-${songtitle} `)
                fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=${songCount}&q=${songartist}+${songtitle}&key=${API_KEY}`)
                .then(result => result.json())
                .then(ytdata => {   
                    let ytID = ytdata.items[0].id.videoId;
                    console.log(`YouTube url =  ${watchVideoURL}${ytID}`)
                })
                .catch(err =>{console.log('There was an error')})
            }) 
        });   

    }
getSongs();

Answer 1

ytdata.items представляется массивом.Таким образом, с учетом этого вам понадобится конструкция цикла для перебора результатов и получения каждой отдельной песни.Например:

.then(ytdata => {

  // Our array of songs
  const songs = ytdata.items

  // The target container in the HTML (this needs to exist beforehand)
  const songContainer = document.getElementById('songs-container')

  // Iterate over each song in the array
  for (let song of songs) {

    // Create an empty link (anchor) element
    let songLink = document.createElement('a')

    // Fill in the href with a valid URL
    songLink.href = watchVideoURL + song.id.videoId

    // Populate the visible text for the link
    songLink.innerText = `${songtitle} by ${songartist}`

    // Place it inside the target DOM element
    songContainer.append(songLink)
  }

})

Примечание : append - это экспериментальная технология , но она должна работать с любым современным браузером.Если вы хотите обеспечить полную совместимость со старыми браузерами, используйте более надежный и проверенный метод, такой как insertAdjacentHTML.Как это: songContainer.insertAdjancentHTML('beforeend', songLink)

Answer 2

Ваш getSongs() должен вернуть массив, а затем вы можете:

const parent = document.querySelector('.parent')
getSongs().map(el => parent.appendChild(`<p>${el}</p>`))