AngularJS で YouTube 検索結果表示
#06 YouTube検索を完成させよう
http://dotinstall.com/lessons/youtube_search_angularjs/21706
を元に、検索結果を表示していく
とりあえずブラウザで開いて
chrome develoer tools でバグがないか確認
さっそくバグ発見
.join() が
,join()
というような , と .の間違い
[] を {} としているなどなど
これらを修正してリロードし
検索欄に入力してボタンをおすと
console に結果が階層として表示される
Object の中に feed があり
その中に
entry がある
max-results=10
と指定したので、
Array[１０]になっている
今回、必要なのは
さらにこの中にある
サムネイルなので、さらに階層を降りていくので
entry の中の数値から
media$group > media$thumbnail
の中にある url などを使う
また、タイトルに関しては
同じく entry の中の数字の中にある
title > $t を使って取得する
これらを使い
$http.jsonp(url).success(function(data){
});
の中に処理を書いていく
ちなみに、確認はできたので
console.dir(data);
はコメントアウト
$scope.results = data.feed.entry;
とする
これで、結果が格納される
データが取得できたので、次に
index.html で表示する
li要素のところへ
画像を表示したいので
<img ng-src="{{result.media$group.media$thumbnail[0].url}}">
タイトル取得には
{{result.media.title.$t}}
とすればOK
result は、取得した結果なので
あとは必要に応じて
階層を . で示して必要としているデータにアクセスして表示するようになる