Using fetch to get data from server, youtubeAPI

JavaScript
1

I am making a youtube app that looks something like this:

Inside the youtube section, I will utilize youtube’s API to feed off all the playlist items.

Here is my javascript file.
My question is, I think that I created an infinite loop or something, whenever I load this file in VS CODE my CPU usage becomes 100%.
I do not know which part I got it wrong.

1st, pseudocode:

I've already set up the API key, playlist ID , URL, as well as options we need to submit when making HTTP request.


// Goal: Create a function that will load the main video.

function loadMainVideo(){
  // using fetch to make HTTP request
  // load the 1st video in the returned data into the main feed
}

2nd my code

// constants
const key = 'my API key, do not want to show to public';
const playlistId = 'UUuSrv3qgQA7SSi6R9bWag5A';
const URL = 'https://www.googleapis.com/youtube/v3/playlistItems';

//youtube API sees all these info, so that it knows what kind of information you want to retrieve
const options = {
  playlistId: playlistId,
  maxResults: 20,
  key: key,
  part: 'snippet'
};

//get JSON from server using fetch

let loadMainVideo = function () {
  //this works for now but have to come back later to understand it
  URL += '?' + Object.keys(options).map((k) => k + '=' + encodeURIComponent(options[k])).join('&');
  //use fetch to get HTTP request
  fetch(URL)
    .then(response => response.json())
    .then((data) => console.log(data))
    .catch(err => console.log(err))
  //load the 1st video in the playlist into the main feed
  document.getElementById('youtube_feed').innerHTML = `    <iframe width="1280" height="720" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>`;
  var id = data.items[0].snippet.resourceId.videoId;
}
// loadMainVideo();
2

I think that it is this line of code that makes VS CODE uses 100% of CPU

           document.getElementById('youtube_feed').innerHTML = `    <iframe width="1280" height="720"src="https://www.youtube.com/embed/${id}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      	 allowfullscreen></iframe>`;

if I do this and console.log(id), I will get the correct video ID I want.

let loadMainVideo = function () {

  //this works for now but have to come back later to understand it
  URL += '?' + Object.keys(options).map((k) => k + '=' + encodeURIComponent(options[k])).join('&');
  //use fetch to get HTTP request
  fetch(URL)
    .then(res => res.json())
    .then(data => {
      console.log(data);
      let id = data.items[0].snippet.resourceId.videoId;
      console.log(id);
    })
    .catch(err => console.log(err))
}

loadMainVideo();
3

nevermind guys… I solved the issue.

I need to put

  document.getElementById('youtube_feed').innerHTML = `
  <iframe width="1280" height="720" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`

inside the data function.

Here is the working snippet:

let loadMainVideo = function () {

  //this works for now but have to come back later to understand it
  URL += '?' + Object.keys(options).map((k) => k + '=' + encodeURIComponent(options[k])).join('&');
  //use fetch to get HTTP request
  fetch(URL)
    .then(res => res.json())
    .then(data => {
      console.log(data);
      var id = data.items[0].snippet.resourceId.videoId;
      console.log(id);
      document.getElementById('youtube_feed').innerHTML = `
      <iframe width="1280" height="720" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      `
    })
    .catch(err => console.log(err))
}

loadMainVideo();