In Chapter 10, we will be building a mashup that integrates Flickr data and Google Maps within the browser context. That is, we will need to call the Flickr API from JavaScript within the browser (in true Ajax style). Flickr provides JSON output to its API.[124]
In Chapter 4, I already presented some code that reads a Flickr feed in JSON format and renders it in HTML. In this section, I’ll show you one basic way to use this JSON data from the Flickr API via JavaScript. Let’s jump into how it works:
Go to the flickr.photos.search page in the Flickr Explorer
(http://www.flickr.com/services/api/explore/?method=flickr.photos.search
), set the tag parameter to flower, and set the
per_page parameter to 3 (to make for a more manageable
number of photos for now). Do not sign the call. Hit the Call Method button, and grab
the REST URL (below the results box). Substitute the api_key parameter
with your own Flickr API key. You will get something like this:
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={API_key}&tags=flower&per_page=3
from which you get the Flickr XML output with which you are familiar from previous chapters.
Let’s now study the JSON output by tacking on the parameter
format=json to the URL.[125]
jsonFlickrApi( {
"photos" : {
"page" : 1, "pages" : 283266, "perpage" : 3, "total" : "849797",
"photo" : [ {"id" : "397677823", "owner" : "28374750@N00",
"secret" : "cab3f3db01", "server" : "124", "farm" : 1, "
title" : "DSC_0026", "ispublic" : 1, "isfriend" : 0, "isfamily" : 0}
, {
"id" : "397677820", "owner" : "28374750@N00",
"secret" : "f70cf0bb19", "server" : "174", "farm" : 1,
"title" : "red flowers", "ispublic" : 1, "isfriend" :
0, "isfamily" : 0}
, {
"id" : "397677553", "owner" : "37015070@N00",
"secret" : "7329c71748", "server" : "158", "farm" : 1,
"title" : "Rose In Vase", "ispublic" : 1, "isfriend" : 0,
"isfamily" : 0}
]}
, "stat" : "ok"}
)
Note what is being returned: a piece of JavaScript containing the function named
jsonFlickrApi() with a single parameter, which is a JavaScript object
that represents the photos.
Let’s now write a bit of HTML and JavaScript to test how to write JavaScript to access the various pieces of the Flickr response:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Flickr JSON</title>
</head>
<script>
function jsonFlickrApi(rsp) {
window.rsp = rsp;
}
</script>
<script src="http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={API_key}&tags=flower&per_page=3&format=json"></script>
</html>
You can load this page in your browser and invoke the JavaScript Shell to learn a few key lines to access parts of the response:
props(rsp.photos)
Fields: page, pages, perpage, photo, total
rsp.photos.perpage
3
rsp.photos.photo[0].id
397694840
Let’s now have jsonFlickrApi() produce a display of the
photos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Flickr JSON</title>
</head>
<body>
<script>
function jsonFlickrApi(rsp) {
window.rsp = rsp;
var s = "";
// http://farm{id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
// http://www.flickr.com/photos/{user-id}/{photo-id}
s = "total number is: " + rsp.photos.photo.length + "<br/>";
for (var i=0; i < rsp.photos.photo.length; i++) {
photo = rsp.photos.photo[i];
t_url = "http://farm" + photo.farm + ".static.flickr.com/" +
photo.server + "/" + photo.id + "_" + photo.secret + "_" + "t.jpg";
p_url = "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id;
s += '<a href="' + p_url + '">' + '<img alt="'+ photo.title +
'"src="' + t_url + '"/>' + '</a>';
}
document.writeln(s);
}
</script>
<script src="http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={API_key}&tags=flower&per_page=50&format=json"></script>
</body>
</html>
The previous example is simple but limited by the fact that loading JSON data
immediately calls the function jsonFlickrApi(). You can customize the
name of the callback function with the jsoncallback parameter (for
example, jsoncallback=MyHandler). You can also use the
nojsoncallback=1 parameter[126]
{
"photos" : {
"page" : 1, "pages" : 283353, "perpage" : 3, "total" : "850057",
"photo" : [ {"id" : "397750427", "owner" : "98559475@N00",
"secret" : "f59b1ae9e1", "server" : "180", "farm" : 1,
"title" : "sakura", "ispublic" : 1, "isfriend" : 0, "isfamily" : 0}
, {
"id" : "397750433", "owner" : "81222973@N00",
"secret" : "0023e79dff", "server" : "133", "farm" : 1,
"title" : "just before spring", "ispublic" : 1,
"isfriend" : 0, "isfamily" : 0}
]}
, "stat" : "ok"}
Given this information, you might be wondering why should you use the
jsonFlickrApi() callback in the first place instead of using a pattern
based on the examples I showed you in Chapter 6 of how to use PHP to interact with the
Flickr API. That is, why not use JavaScript to do the following:
Do an HTTP GET on this:
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={api-key}&tags=flower&per_page=3&format=json&nojsoncallback=1
Instantiate the response as a JavaScript object that you can then parse at your leisure.
I will, in fact, walk you through such an approach in Chapter 10. I defer the discussion until then because we will need to deal with security issues particular to web browsers in order to make our examples work.