GoogleAPI ＋ JSで取得したデータを表示する方法について

いつもご回答いただきありがとうございます。GoogleAPIを使い、Youtubeの再生回数取得に挑戦しています。

APIの導入、再生回数取得は下記サイトを参考にして、無事おこなうことができました。
↓
http://www.koikikukan.com/archives/2014/12/24-00 …


質問させていただきたいのですが、参考サイトでは再生回数が「alert」で表示されます。
それを、変数に入れてページ内の好きなところに配置したいと考えています。

しかし、javascriptの知識がほとんどないため、どうもうまくいきません・・・。
参考サイトを元に、少し変えたのが下記です。

.done(function( data ) {
var cnt = data.items[0].statistics.viewCount;
})

document.write（cnt）


ご存知の方がいらっしゃいましたら、ご助言をいただけないでしょうか。
よろしくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2016/02/15 15:04

こんにちは

非同期処理（ajaxなど）の場合、結果を利用して処理するタイミングに時間差がありますので、それに関する処理は全てコールバック（.done以下のfunction）内に記す必要があります。

また、結果を表示するのに
　document.write
を用いていらっしゃいますが、想像するところHTML読込後に実行していると思いますので、document.writeを用いると新しい文書を作成することになってしまいます。（もとから表示されていたものは消えてしまう）
http://blog.3streamer.net/html5-css3/document-wr …
http://www.pablos.jp/digital-marketing/be-carefu …

では、どうするかと言うと、方法はいろいろありますが・・
　<div id="count"></div>
のようなHTMLに表示したいのであれば（div要素は既にあるものとします）。
jQueryを利用しているなら・・・
　$("#count").htm(cnt);
のような方法で可能です。

結局、
.done(function( data ) {
　$("#count").html(data.items[0].statistics.viewCount);
})
ってな感じで、とりあえずできるはずと思います。


※ 参考サイトでは実行のタイミングを制御していないようですが、ページ読込み後に全体を実行なさるのが確実です。
具体的には全体を
　$(function(){
　　～～～
　});
で囲うような方法です。
http://semooh.jp/jquery/api/core/jQuery/callback/
http://api.jquery.com/jQuery/#jQuery3

この回答へのお礼

fujillin様

ご回答頂き、本当に感謝しております。実は、なかなか回答を得ることができなかったので安心しました。
fujillin様に教えて頂いたとおり変更したら無事、動作しました！
まだまだ、わからないことばかりですがもっと勉強して、fujillin様のように回答する側になりたいと思います。
本当にありがとうございます。

お礼日時：2016/02/15 16:02