Quicker Flickr Geotagger by Tom Royal on Flickr
Summer Paws by Tom Royal on Flickr
Hi, Robot by Tom Royal on Flickr
The Strip by Tom Royal on Flickr
Public Transportation by Tom Royal on Flickr
Vice City by Tom Royal on Flickr
Show by Tom Royal on Flickr
Bellagio by Tom Royal on Flickr

You're using a very old version of Internet Explorer which can't show the photos that should be in this box. Please consider upgrading to a newer version of IE or an alternative such as Firefox. Thanks.

How to: Read Flickr API JSON via jQuery

March 28th, 2012

I always prefer to read API data in XML, but there are times when that becomes problematic – especially due to cross domain access policies. If you're working on a single app it's possible to solve that by proxying the XML with a local PHP script, but if you're working with the browser only – in an HTML app, for example – that's no good. One way around is to use JSON.

Except that I have never really understood JSON.

So, using Flickr as an example, here's how to reach to the API, execute the API call, and parse the JSON results into something useful. It builds on this useful post at Webhole and assumes you know the basics of jQuery etc.

Step 1: Sort out the API URL

You'll need to know the API endpoint URL. I'm using the photosets.getPhotos call.

http://api.flickr.com/services/rest/?format=json&jsoncallback=?&api_key=YOURKEYHERE&photoset_id=YOURSETIDHERE&method=flickr.photosets.getPhotos&per_page=5

Note the inclusion of format=json&jsoncallback=?, which is needed. Also, I've limited the results to five just for testing's sake.

Build this URL in the usual way, and stash it in a variable called apiurl.

Step 2: Check the results

If you bung that URL in a browser, you should get something like the following:

jsonFlickrApi({
"photoset":{
"id":"72157627904918000",
"primary":"6244703830",
"owner":"40732557432@N01",
"ownername":"tomroyal",
"photo":[
{"id":"6243961525", "secret":"x", "server":"6091", "farm":7, "title":"Meiji Jingu Torii", "isprimary":"0"},
{"id":"6243946793", "secret":"x", "server":"6050", "farm":7, "title":"Sad Polar Bears", "isprimary":"0"},
{"id":"6243947391", "secret":"x", "server":"6229", "farm":7, "title":"Rainy Shinjuku", "isprimary":"0"},
{"id":"6244679360", "secret":"x", "server":"6170", "farm":7, "title":"Tokyo to Kyoto", "isprimary":"0"},
{"id":"6244162047", "secret":"x", "server":"6042", "farm":7, "title":"Hikari Shinkansen", "isprimary":"0"}
],
"page":1,
"per_page":"5",
"perpage":"5",
"pages":23,
"total":"112"},
"stat":"ok"})

So, in there you have a group of data called photoset containing load of value pairs (ownername = tomroyal, etc), and also an array containing another set of pairs per photo. I'll explain how to get one of the values, and to loop through the photo data.

Step 3: Document Ready

Add the following to your document.ready:

$('#button').click(function(){
$.getJSON(apiurl,function(json){
// do stuff
});
});

Obviously this function fires when somebody clicks the object with ID = button. The getJSON line fetches the API feed using the address we stored in the variable apiurl. Once that's fetched, we can process the results.

Step 4: Get your data

Now you'll need to add the bit that gets the data out of the pesky JSON. Replace the // do stuff line with:

$("#results").append('<p>"'+json.photoset.id+'"</p>');
$.each(json.photoset.photo,function(i,myresult){
$("#results").append('<p>"'+myresult.id+'"</p>');
});

To get a single value, we simply use json.photoset.variablehere – in this case json.photoset.id, or json.photoset.ownername.

To l0op through an array, use $.each. Our array is json.photoset.photo, so we loop through that, treating each entry as myresult. Values inside the array row can then be accessed with myresult.variablehere (eg, myresult.secret).

That's it. Easy once you know how.

Complete code:

<html>
<head><
script type="text/javascript">
var apiurl = "XXXXX"; // build your URL here
$(document).ready(function(){
$('#button').click(function(){
$.getJSON(apiurl,function(json){
$("#results").append('<p>"'+json.photoset.id+'"</p>');
$.each(json.photoset.photo,function(i,myresult){
$("#results").append('<p>"'+myresult.id+'"</p>');
});
});
});
});
</script>
</head>
<body>
<div id="button">button</div>
<div id="results"></div>
</body>
</html>

Leave a Reply

You must be logged in to post a comment.