Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery $.getJSON - How do I parse a flickr.photos.search REST API call?

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?

like image 993
Chaddeus Avatar asked Mar 25 '10 06:03

Chaddeus


People also ask

What is getJSON in jQuery?

jQuery getJSON() Method The getJSON() method is used to get JSON data using an AJAX HTTP GET request.

What does getJSON return?

getJSON( url, [data], [callback] ) method loads JSON data from the server using a GET HTTP request. The method returns XMLHttpRequest object.

Does Flickr have an API?

The Flickr API is available for non-commercial use by outside developers.


1 Answers

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>
like image 182
Rachel Colby Avatar answered Oct 16 '22 23:10

Rachel Colby