次の本の第5章にて、jQueryを用いたJSONファイルの取得が扱われていたのでメモ。

Learning Web App Development
Semmy Purewal
Oreilly & Associates Inc
2014-03-03


ターゲットはFlickrの画像で、タグ名で検索された結果からそれぞれの画像のURLを取得し、自分のウェブサイトに反映させようというのが目標。

FlickrからのJSON取得に関しては、ここを参照のこと。基本的には、
http://api.flickr.com/services/feeds/photos_public.gne
に続けてクエリを与えてやればよさげ。例えば、
http://api.flickr.com/services/feeds/photos_public.gne?tags=dogs&format=json
にアクセスすれば、タグ名を"dogs"としてフィルターした結果をJSON形式で取得できる(ブラウザで上記URLを開いてみれば確認可能)。得られた結果は
jsonFlickrFeed({
    "title": "Recent Uploads tagged dogs",
    "link": "http://www.flickr.com/photos/tags/dogs/",
    "description": "",
    "modified": "2014-06-04T06:30:25Z",
    "generator": "http://www.flickr.com/",
    "items": [ ... ]
})
のようになっており、"items"には
{
    "title": "...title...",
    "link": "http://www.example.com",
    "media": {"m":"http://bit.ly/..."},
    "date_taken": "...date string...",
    "description": "...description string...",
    "published": "...date string...",
    "author": "...author name...",
    "author_id": "...author id...",
    "tags": "...tags..."
}
のように、個々の画像データがオブジェクトリテラルの形式で格納されている。ここでは画像のURLを取得することが目的であるので、"items" -> "media" -> "m"と辿っていけばよいことがわかる。

jQueryによるJSONの取得はとても簡単で、
jQuery.getJSON( url [, data ] [, success ] )
というメソッドを使うだけ。ここでは、最初の引数にはURLを与え、2つ目の引数として得られたJSONを処理するための関数を与える。例えば
$(document).ready(function() {
  var url = '...';

  $.getJSON(url, function(flickrResponse) {
    console.log(flickrResponse);
  });
});
とすれば、取得されたJSONファイルをconsoleに表示できる。

ここまでで準備完了。早速実験。テスト用に次のようなHTMLを仕込んでおく:
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Flickr App</title>
  <script src="javascripts/jquery-1.11.1.min.js"></script>
  <script></script>
</head>
<body>
  <header>
  </header>

  <main>
    <div class="photos"></div>
  </main>

  <footer>
  </footer>
</body>
</html>
続いて<script></script>にコードを書いていく:
$(document).ready(function() {
  var url = 'http://api.flickr.com/services/feeds/photos_public.gne?' +
            'tags=dog&format=json&jsoncallback=?';

  $.getJSON(url, function(flickerResponse) {
    flickerResponse.items.forEach(function(photo) {
      var $img = $('<img>');
      $img.attr('src', photo.media.m);
      $('main .photos').append($img);
    }); // end forEach
  }); // end getJSON
}); // end ready
これをブラウザで開くと、上手く行けば画面いっぱいにワンちゃん画像が広がる。外の世界とつながると楽しいね。