AngularJS で YouTube 検索結果表示


AngularJS で YouTube 検索結果表示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[10]になっている

今回、必要なのは
さらにこの中にある
サムネイルなので、さらに階層を降りていくので
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 は、取得した結果なので
あとは必要に応じて
階層を . で示して必要としているデータにアクセスして表示するようになる


PDF
カテゴリー: AngularJS   パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>