Q:

Output results from fetchapi to html

I have this code that returns currently played songs on online radio.I have problem outputing results to html. When i console log the results like shown below i get 3 results as i should. But when i display that content on html i just get one result. My question is how should i go through results and output them on the page
    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();

A:

ytdata.items appears to be an array. So with that in mind you would need a loop construct to iterate over the results and get each individual song. Like this:
.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)
  }

})

Note: append is experimental technology but should work with any modern browser. If you wish to ensure full compatibility with older browsers use a more robust and proven method like insertAdjacentHTML. Like this:
songContainer.insertAdjancentHTML('beforeend', songLink)

