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.