ItsMeMike ItsMeMike - 16 days ago 4
Javascript Question

Uncaught TypeError: Cannot read property 'statistics' of undefined (jquery, youtube api v3)

Good evening. I'm calculating video ratings based on likes and dislikes of a video, on mouse hover of an element. Part of my code is below.

...
$(".item-overlay").hover(
function() {
var video_id = $(this).find(".item-overlay-video-url").text();
var video_api = "https://www.googleapis.com/youtube/v3/videos?part=statistics&id="+video_id+"&key="+api;

$.getJSON(video_api,
function(data) {
var likes = parseInt(data['items'][0]['statistics']['likeCount']);
var dislikes = parseInt(data['items'][0]['statistics']['dislikeCount']);
var total = likes+dislikes;
var percentage = Math.round((likes / total) * 100);
var found = false;

...do code below to display star ratings...


My code works fine, the star ratings are displayed properly. However, I keep getting this error in my console:
Uncaught TypeError: Cannot read property 'statistics' of undefined

On this line:

var likes = parseInt(data['items'][0]['statistics']['likeCount']);


Can anyone tell me why I'm getting this error? The 'likes' variable cannot be null/empty, as it returns the proper number of likes for the video, and calculates properly. Not to mention, my code is working fine. Just throwing this error.

Thanks.

EDIT: I have added screenshots of the log output ( console.log(data['items'][0]); ), per Luiz Eduardo de Christo's request.

enter image description here
enter image description here

Would it make sense that this error only shows up when I hover over different elements very quickly? Like, hovering over different songs too quickly? Perhaps faster than the code can keep up? Will adding a delay help with this error? Is that just how getJSON works if it is requested too often?

EDIT 2: Added screenshot of the returned result of the 'statistics' object from youtube.

enter image description here

Answer

For anyone else who might be having this issue, @Akurn and @LuizEduardodeChristo suggested checking that the data exists before proceeding. It seems that YouTube does not return the 'statistics' object when it is requested too often. In my case, when a user hovers over multiple songs too quickly, the api request sometimes returns an empty object, resulting in the error.

We can fix this with a simple typeof check.

 typeof(data['items'][0]) != 'undefined'

Here is my updated code with the typeof check in place:

...some code above...
$(".item-overlay").hover(
        function() {
            var video_id  = $(this).find(".item-overlay-video-url").text();
            var post_id   = $(this).find(".item-post-id").text();
            var video_api = "https://www.googleapis.com/youtube/v3/videos?part=statistics&id="+video_id+"&key="+api;

            $.getJSON(video_api, 
                function(data) {
                    if (typeof (data['items'][0]) != 'undefined') {
                        var likes      = parseInt(data['items'][0]['statistics']['likeCount']);
                        var dislikes   = parseInt(data['items'][0]['statistics']['dislikeCount']);
                        var total      = likes+dislikes;
                        var percentage = Math.round((likes / total) * 100);
                        var found      = false;

                        ...the rest of the code follows...

This check seems to be working and I am no longer getting the error message (yet).

Thanks!

Comments