youtube API V3について教えて下さい。

youtubeの動画情報を下記のURLを入れるとゲットすることができました。

https://www.googleapis.com/youtube/v3/videos?id=WTLQQPBPL1U&key=【APIキー】&part=id, snippet, contentDetails, player, recordingDetails, statistics, status, topicDetails

上のhttpsのURLをブラウザに入れると
動画IDの情報が入手できる(ブラウザに表示される)のですが、その中から
"statistics": {
"viewCount": "1840904",
"likeCount": "1814",
"dislikeCount": "279",
"favoriteCount": "0",
"commentCount": "86"
},
上のviewcountの部分だけを抜き出す方法がわかりません。

Jqueryでやるサイトを見つけましたが、外部サイトが
上のURL(youtubeの動画を習得するページ)の場合どうやるのかよく理解できませんでした。
例)
http://qiita.com/yumetodo/items/00b37234cb86e741f0fb

javascriptでviewcountの部分を抜き出し、htmlに書き出す方法を教えて下さい。

回答の条件
  • 1人50回まで
  • 登録:
  • 終了:2016/09/23 18:30:03

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

こんな感じ。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
    var apikey = "【APIキー】";
    var video_id = "WTLQQPBPL1U";
    var url = "https://www.googleapis.com/youtube/v3/videos?id=" + video_id + "&key=" + apikey + "&part=statistics";
    $.getJSON(url, function(data) {
        // viewCount を取り出し
        var count = data.items[0].statistics.viewCount;

        // HTML に出力
        $("#count").text(count);
    });
});
</script>

<div id="count"></div>

viewCount だけが欲しいのであれば、URL の part= の部分は statistics だけで大丈夫です。


jsFiddle で試したのがこちら。
https://jsfiddle.net/keysgxhz/

他17件のコメントを見る
id:a-kuma3

デフォルトの関連性の高い順番ではなく日付順になるだけなので何ら問題ないと思ったのですが動作しません。ためしに内側の$.getJSONのほうのURLにも日付順にしてみたのですがこちらはvideoIdとマッチしたデータをゲットするだけなので関係ないですよね? 何が原因なのでしょうか。

例えば、サッカーで order=date を指定して検索すると、6番目からデータが変わってます。
5番目は

data.items[4].id.kind    : "youtube#video"
data.items[4].id.videoId : "I_GxZc1RekA"

なのですが、6番目が

data.items[5].id.kind       : "youtube#playlist"
data.items[5].id.playlistId : "PLc4IAowg0iRAuITaOWa5_qCl0859b5OxM"

となっています。
videoId ではなく、playlistId が入っているために、内側の関連動画検索には relatedToVideoId=undefined を渡して検索しているために、API の応答がエラーになって返ります。

外側の search API で type=video も指定して、動画だけにすると大丈夫です。
Search: list  |  YouTube Data API (v3)  |  Google Developers

2016/09/07 17:39:34
id:kajironpu

なるほど、それが原因だったのですね。Developersマニュアルで確認しました。これを使いこなしたらいろいろな情報が取れてとてもおもしろいです。JSONのデータの結果を表示させる方法などとても勉強になりました。ありがとうございます。

2016/09/08 10:37:45

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません