I'm having a problem with retrieving related videos as thumbnails towards a specific video. In my code, I have the search->list set up correctly and returns the different titles and thumbnail URLs for the related videos. However, since search->list doesn't have parameter contentDetails or statistics, I found another question related to my exact same problem here and used a secondary call for getting videos->list since it supports those parameters to be able to retrieve the duration and view count. But the problem is that both values (vidDuration& viewCount) are not being passed anything and marked as undefined as the item is passed through it and halted. How can I make the item's duration and viewCount values based on search->list's item?
script.js:
function relatedVids(videoId){ debugger; $.get( // get related videos related to videoId - relatedToVideoId"https://www.googleapis.com/youtube/v3/search", { part: 'snippet', maxResults: vidResults, relatedToVideoId: videoId, // $.cookie("id"); from single-video.html type: 'video', key: 'XXXXXXXXX' }, function(data) { $.each(data.items, function(i, item) { console.log(item); var vidTitle = item.snippet.title; // video title //var videoId = item.snippet.resourceId.videoId; // video id //var vidDuration = item.contentDetails.duration; //var viewCount = item.statistics.viewCount; var vidThumbUrl = item.snippet.thumbnails.default.url; // video thumbnail url var extractVideoId = null; // var to extract video id string from vidThumbUrl // check if vidThumbUrl is not null, empty string, or undefined if(vidThumbUrl) { //console.log("vidThumbUrl: ", vidThumbUrl); var split = vidThumbUrl.split("/"); // split string when '/' seen extractVideoId = split[4]; // retrieve the fourth index on the fourth '/' //console.log("extractVideoId: ", extractVideoId); // YE7VzlLtp-4 //console.log("split array: ", split); } else console.error("vidThumbUrl is either undefined or null or empty string."); // if video title is longer than 25 characters, insert the three-dotted ellipse if(vidTitle.length > 25) { var strNewVidTitle = vidTitle.substr(0, 25) +"..."; vidTitle = strNewVidTitle; } // search->list only takes snippet, so to get duration and view count; have to call this function that has the recognized param structure $.get("https://www.googleapis.com/youtube/v3/videos", { part: 'contentDetails, statistics', id: extractVideoId, //item.snippet.resourceId.videoId, key: 'XXXXXXXXX', }, // return search->list item's duration and view count function(item) { vidDuration = item.contentDetails.duration; // pass item's duration return vidDuration; }, function(item) { viewCount = item.statistics.viewCount; // pass item's view count return viewCount; } ); try { var vidThumbnail = '<div class="video-thumbnail"><a class="thumb-link" href="single-video.html"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img src="'+ vidThumbUrl +'" alt="No Image Available." style="width:204px;height:128px"/></a><p><a class="thumb-link" href="single-video.html">'+ vidTitle +'</a><br/>'+ convert_time(vidDuration) +' / Views: '+ viewCount +'</p></div>'; // print results $('.thumb-related').append(vidThumbnail); } catch(err) { console.error(err.message); // log error but continue operation } } ); } );}single-video.html script:
$(document).ready(function() { var videoId; $(function() { if($.cookie("title") != null && $.cookie("id") != null) { var data = '<div class="video"><iframe height="'+ vidHeight +'" width="'+ vidWidth +'" src=\"//www.youtube.com/embed/'+ $.cookie("id") +'\"></iframe></div><div class="title">'+ $.cookie("title") +'</div><div class="desc">'+ $.cookie("desc") +'</div><div class="duration">Length: '+ $.cookie("dur") +'</div><div class="stats">View Count: '+ $.cookie("views") +'</div>'; $("#video-display").html(data); $("#tab1").html($.cookie("desc")); videoId = $.cookie("id"); //vidDuration = $.cookie("dur"); works but prints out the same value for each //viewCount = $.cookie("views"); works but prints out the same value for each debugger; relatedVids(videoId); // called here console.log("from single-vid.html globalPlaylistId: ", $.cookie("playlistId")); // remove cookies after transferring it to this page for display $.removeCookie("title"); $.removeCookie("id"); $.removeCookie("desc"); $.removeCookie("views"); $.removeCookie("dur"); $.removeCookie("tags"); $.removeCookie("playlistId"); } });});