How to: Read Flickr API JSON via jQuery

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.

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:

{"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"}

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:

// 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:


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

To l0op through an array, use $.each. Our array is, 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:

script type="text/javascript">
var apiurl = "XXXXX"; // build your URL here


'); $.each(,function(i,myresult){ $("#results").append('


'); }); }); }); });