Javascript problem regarding sending the correct href into the DOM

JavaScript
21

okay I may have to google how to do that. thanks. not that I dont wanna listen to your advice I am really novice when it comes to javascript. This is my 1st javascript project.

22

Yeah, I hear you. Sorry if it seems like I’m making it harder for you. Also, for the first project, you’re doing quite well.

I guess i started to refactor your code instead of just helping you, it’s just hard for me to help without also pushing for doing things a certain way. You should totally just make it work first however you feel comfortable doing it, then i can maybe help refactor the code later.

Just as a note, when doing async stuff (fetch is async) it’s important to recognize when the data is available.

1 Like
23

No need to be sorry. Thanks for explaining things for me.
My understanding is that actually the data is being received at the end, it is just that I am trying to use that data before it is ready.

Do you mean that I should get the data 1st, then store it into an object, then do things to that object outside of the fetch function. Is that correct?

Also on the other hand I could have just ship this as a bonus feature: “video only loads whenever user click on the thumbnail” LOL

24

Yes, but let’s try this instead.

You shouldn’t need a global variable for the video id. Keep everything else like it is now. Declare a local variable inside fetch for the video id and call renderMainVideo from inside fetch, pass the video id variable as an argument to renderMainVideo, just like you are doing with renderPlaylist and data. Then in the click handler function (i called it handleGetPlaylistVideo) you again just use a local variable for the video id and pass that to renderMainVideo, it should be getting the correct id from the data-key attribute that was set by the renderPlaylist function.

I think that should work, but honestly without some code to actually work on it gets a little difficult to keep track of things, so i might have messed something up. It’s also pretty difficult to put code logic into just words, at least i think it is.

25

I will get back to you tomorrow. Thanks!

26

I see. So I took your advice and set 2 local variables , one for the main player, one for playlist.
And it worked this time.

Here is the complete code.

/* 
TODO list

1. need a fetch function to handle HTTP request
2. renderMainVideo() 
3. renderPlaylist()
4. call back function for the click event
*/


/*
Global variables and constants
*/


const key = '';
const playlistId = 'UUuSrv3qgQA7SSi6R9bWag5A';
var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';

const options = {
  playlistId: playlistId,
  maxResults: 20,
  key: key,
  part: 'snippet'
};




/* 
HTTP request
*/
URL += '?' + Object.keys(options).map((k) => k + '=' + encodeURIComponent(options[k])).join('&');

fetch(URL)
  .then(res => res.json())
  .then(function (data) {
    let mainVideoID;
    mainVideoID = data.items[0].snippet.resourceId.videoId;
    renderPlaylist(data);
    renderMainVideo(mainVideoID);
  });

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




/*
Render Playlist
*/
function renderPlaylist(data) {
  console.log(data.items.length); //this gives you 20 which is correct

  //let's try loop through the array using for loop
  for (let i = 1; i < data.items.length; i++) {
    var thumbnail = data.items[i].snippet.thumbnails.medium.url;
    var title = data.items[i].snippet.title.substring(0, 50);
    var videoID = data.items[i].snippet.resourceId.videoId;


    document.getElementById('youtube_playlist').innerHTML += `
      <div class="individual_list_item" data-key = "${videoID}">
      <img src="${thumbnail}" alt="video_thumbnail_placeholder" class="thumbnails">
        <p class="playlist_titles">${title}</p>
    </div>
      `;
  }
}

/*
Call back function for the click event
*/

/* every time you click the video, you want to get the videoID of that specific video */

document.getElementById('youtube_playlist')
  .addEventListener('click', function (event) {
    const target = event.target;

    let mainVideoID_forclick;
    if (event.target.dataset.key) {
      mainVideoID_forclick = event.target.dataset.key;
      renderMainVideo(mainVideoID_forclick);
    } else {
      mainVideoID_forclick = event.target.parentElement.dataset.key;
      renderMainVideo(mainVideoID_forclick);
    }
  })
27

thanks for the help!!! :sunny: I will PM you once my site is online!

28

Nice, glad to help and good job. :+1:

1 Like