Parsing this JSON data with JavaScript

Question

We have a working PHP function that grabs specific YouTube video information using YouTube API v3.

We're trying to use JavaScript (jQuery) to do the same thing. The issue is that using our PHP function causes the page to load very slowly while it's retrieving the data. We're hoping that using JavaScript will allow our page to load before (or during) the data requests from YouTube.

First of all, this is an example url for one of our videos (you will need an API key to see the returned information yourself):

https://www.googleapis.com/youtube/v3/videos?part=statistics&id=ce5KbCTfHoA&key={YOUR_API_KEY}

That specific url will return this information:

{
 "kind": "youtube#videoListResponse",
 "etag": "\"jOXstHOM20qemPbHbyzf7ztZ7rI/qRFx1vTFF-k7dkRzNB5rGQ-dqiQ\"",
 "pageInfo": {
  "totalResults": 1,
  "resultsPerPage": 1
 },
 "items": [
  {
   "kind": "youtube#video",
   "etag": "\"jOXstHOM20qemPbHbyzf7ztZ7rI/2yn7rCfXCu0o-GNVtMEQqYssSpE\"",
   "id": "ce5KbCTfHoA",
   "statistics": {
    "viewCount": "33169",
    "likeCount": "281",
    "dislikeCount": "3",
    "favoriteCount": "0",
    "commentCount": "85"
   }
  }
 ]
}

We are trying to retrieve the likeCount and dislikeCount of this video using JavaScript.

We can achieve this using PHP in the following manner:

function getVideoRatings() {
    $JSON = file_get_contents("https://www.googleapis.com/youtube/v3/videos?part=statistics&id={VIDEO_ID}&key={YOUR_API_KEY}");
    $json_data = json_decode($JSON, true);

    $likes = $json_data['items'][0]['statistics']['likeCount'];
    $dislikes = $json_data['items'][0]['statistics']['dislikeCount'];

    /* some other code... */
}

This successfully parses the json information returned by google and returns the likes (likeCount) and dislikes (dislikeCount) for the video.

We'd like to do this using JavaScript (jQuery). Can anyone please help me figure this out?

I really appreciate any help or bump in the right direction.

Thanks

So I understand ajax to be an awesome way of doing this. However, after several days of trying to get ajax to work, I have given up. If you can post a snippet for me at least, that would help so much. Thanks for the feedback! — anthonyCam
– anthonyCam, Commented Sep 16, 2015 at 0:05
Reading through the tutorial you linked. Thanks for the extra info. — anthonyCam
– anthonyCam, Commented Sep 16, 2015 at 0:20

user5335028 · Accepted Answer · 2015-09-16 00:07:36Z

2

$.getJSON("https://www.googleapis.com/youtube/v3/videos?part=statistics&id=ce5KbCTfHoA&key={YOUR_API_KEY}", function( data ) {
    var likes = data['items'][0]['statistics']['likeCount'];
});

This should work. Use jQuery documentation.

answered Sep 16, 2015 at 0:07

user5335028

Sign up to request clarification or add additional context in comments.

5 Comments

anthonyCam Over a year ago

Wonderful, I will try this out and let you know how it goes. Thanks, Dantez.

aldrin27 Over a year ago

You can't just actually do that. Parsed it to an object before you can do that.

anthonyCam Over a year ago

So I'm using this example and it's not returning anything. Aldrin, can you please give me an example on how to parse it to an object and display the results? Please excuse my ignorance on the subject, I have a lot of learning ahead of me. Thanks

aldrin27 Over a year ago

use the $.parseJSON($yourDataHere);

anthonyCam Over a year ago

This actually did work without needing the $.parseJSON() function. Thanks all of you, this really helped.

Collectives™ on Stack Overflow

Parsing this JSON data with JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related