Parsing a JSON Flickr feed with jQuery

Parsing a JSON Flickr feed with jQuery is not so simple as it could seem, because this requires a firm knowledge of two factors: the feed URL and the correct syntax to use with the jQuery's getJSON() method. First the URL, that must be in this form:

http://api.flickr.com/services/feeds/photos_public.gne?id=31968388@N02&lang=it-it&format=json&jsoncallback=?

where id is your Flickr ID and lang is your preferred language. However, the key parameter is jsoncallback. Without this, your script will fail and it'll return null. Second, the syntax of the jQuery's method:

$.getJSON(url, function(data){});

where data is a reference to your JSON object. Now, let's test something:

$(document).ready(function() {

    $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?id=31968388@N02&lang=it-it&format=json&jsoncallback=?', 
    function(data) {
          
      var ul = $('<ul></ul>');
      var html = '';
      
      $.each(data.items, function(i,item) {            
            
             html += '<li><h3>' + item.title + '</h3><p><a href="'+item.link+ '"><img src="'+item.media.m+ '"/></a></p></li>';

            
      });
      
      ul.html(html);
      
      
      $(ul).appendTo('body');
        
    
    });


});

You can see the result here. As you can see, preliminary requirements are more difficult to understand than the actual implementation.

Leave a Reply

Note: Only a member of this blog may post a comment.