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 の中の数値から
1 | media$group > media$thumbnail |
の中にある url などを使う
また、タイトルに関しては
同じく entry の中の数字の中にある
title > $t を使って取得する
これらを使い
1 2 | $http.jsonp(url).success(function(data){}); |
の中に処理を書いていく
ちなみに、確認はできたので
1 | console.dir(data); |
はコメントアウト
1 | $scope.results = data.feed.entry; |
とする
これで、結果が格納される
データが取得できたので、次に
index.html で表示する
li要素のところへ
画像を表示したいので
1 | <img ng-src="{{result.media$group.media$thumbnail[0].url}}"> |
タイトル取得には
1 | {{result.media.title.$t}} |
とすればOK
result は、取得した結果なので
あとは必要に応じて
階層を . で示して必要としているデータにアクセスして表示するようになる