stackoverflow??? infinite loop??? (ES6 fetch,youtube API)

[mrchow19910319]

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();

[keskparane]

I think you're passing the response back on itself. Maybe try something like..

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 => {
		let data = response.body.json();
		console.log(data);
		let id = data.items[0].snippet.resourceId.videoId;
		//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>`;
	})
	.catch(err => console.log(err));  
}

 

 

[mrchow19910319]

30 minutes ago, keskparane said:

I think you're passing the response back on itself. Maybe try something like..

if I do this instead, I will get the correct result when I console.log(id)

 

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();

 

[mrchow19910319]

this time it worked

 

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();

 

[keskparane]

I didn't bother commenting your calling the function because I thought that was just you in the process of debugging.

I see you managed to come up with a solution. Good for you. /s