jQuery $.getJSON - How do I parse a flickr.photos.

2020-05-15 05:09发布

站内问答 / jQuery
679 4 6

Trying to adapt the $.getJSON Flickr example:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
    function(data){
    $.each(data.items, function(i,item){
        $("<img/>").attr("src", item.media.m).appendTo("#images");
        if ( i == 3 ) return false;
    });
});

to read from the flickr.photos.search REST API method, but the JSON response is different for this call.

This is what I've done so far:

var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURAPIKEYHERE&tags=yokota+air+base&safe_search=1&per_page=20";
var src;
$.getJSON(url + "&format=json&jsoncallback=?", function(data){
    $.each(data.photos, function(i,item){
        src = "http://farm"+ item.photo.farm +".static.flickr.com/"+ item.photo.server +"/"+ item.photo.id +"_"+ item.photo.secret +"_m.jpg";
        $("<img/>").attr("src", src).appendTo("#images");
        if ( i == 3 ) return false;
    });
});

I guess I'm not building the image src correctly. Couldn't find any documentation on how to build the image src, based on what the JSON response is. How do you parse a flickr.photos.search REST API call?

4条回答
做个烂人
2楼-- · 2020-05-15 05:28

To access the Flickr API you must use https: //:

var url = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURAPIKEYHERE&tags=yokota+air+base&safe_search=1&per_page=20";
var src;
查看更多
0人赞 添加讨论(0) 举报
霸刀☆藐视天下
3楼-- · 2020-05-15 05:38

This could be simplified by choosing the 'url_m' extras parameter and per_page parameter...

extras=url_m&per_page=4

Then all you need is this within the loop...

$("<img/>").attr("src", item.url_m).appendTo("#images");
查看更多
0人赞 添加讨论(0) 举报
\"骚年 ilove
4楼-- · 2020-05-15 05:39

Nevermind, I got it. For those that are interested, it's parsed like so:

var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURAPIKEYHERE&tags=yokota+air+base&safe_search=1&per_page=20";
var src;
$.getJSON(url + "&format=json&jsoncallback=?", function(data){
    $.each(data.photos.photo, function(i,item){
        src = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_m.jpg";
        $("<img/>").attr("src", src).appendTo("#images");
        if ( i == 3 ) return false;
    });
});

Notice the .photo was moved to the $.each method signature.

查看更多
0人赞 添加讨论(0) 举报
欢心
5楼-- · 2020-05-15 05:49

The jQuery API documentation for jQuery.getJSON() has a helpful example here: http://api.jquery.com/jquery.getjson/

The documentation provides a complete file as an example of how to parse the API call; it loads the four most recent pictures of Mount Rainier from the Flickr JSONP API. I'll reprint the file here as additional context that might be helpful, particularly for those new to using API's.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <style>
  img {
    height: 100px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="images"></div>

<script>
(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();
</script>

</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)