How to: Read Flickr API JSON via jQuery
March 28th, 2012I 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> |