Related Videos with Content DetailsDetails & Statistics - Youtube API V3

I am having a problem extracting linked videos as thumbnails for a specific video. In my code, I configured search->list

and returned different titles and thumbnails for related videos correctly . However, since it search->list

does not have a parameter contentDetails

or statistics

, I found another question related to my same problem here and used a secondary call for getting videos->list

, since it supports those parameters, in order to be able to get the duration and number of views. But the problem is that both values ​​( vidDuration

and viewCount

) are not passed by anything and are marked as undefined when the element is passed through it and stops. How can I render elements duration

and viewCount

based on an element search->list

?

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 duration and view count
                        function(item)
                        {
                            vidDuration = item.contentDetails.duration; // pass item duration
                            return vidDuration;
                        },
                        function(item)
                        {
                            viewCount = item.statistics.viewCount; // pass item 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");
        }
    });
});