How to add flickr images using JSON - tutorial pt1

A tutorial for those wanting to create mushups but are new/unfamiliar with JSON, this short tutorial will explain what it is, where it's used and most importantly how to use it within a page. It should also act as a nice API, Web 2.0 and mashup primer.

Pre tutorial ramble

For a while now I've been wanting to do tutorials to get people started with playing with data on the internet. The term mashup is much better than what I used to call data aggregation & syndication. It involves using the internet to collect a bunch of information and represent it in a new and exiting way.

This tutorial assumes that you have at least a little JavaScript knowledge but not alot. If you've worked with XML it will help you to realise why JSON is so darn good.

JSON (JavaScript Object Notation)

To those of you who are already familiar with working with XML and in particular those of you who are familiar with the XHR object will already understand the frustrations or retrieving and parsing XML. Enter JSON

JSON is a lightweight (not heavyweight) data exchange type thing. It's similar to XML in that you use it to send data to and from servers. The difference (from XML) is that it doesn't have pointy brackets and it's really easy to use with JavaScript (not that XML is hard, it's just easier).

It (JSON) is also now being served up by many of the Internet's coolest Web APIs/Services which are the cornerstone of the mashup scene.

JSON is made up of objects containing name value pairs in curly braces.

{string:value}
eg
{"wheels":"chrome"}


we can see use this right away in JavaScript

var car = {"wheels":"chrome"};
alert(car.wheels); // alerts chrome

Of course the value can be lots of things it can be a string ("") as above or a number (123), another object({}), an array([]), a bool (true|false) or even null. This allows nesting in much the same way as XML does.

However, unlike XML it avoids all those DOM parsing functions such as getElementById(), and getELementByTagName().

JSON with an object nested in an object example
var car = {"wheels":{"front":"chrome", "back":"steel"}};
alert(car.wheels.front); //alerts chrome
alert(car.wheels.back); // alerts steel
/*equivalent XML
<wheels>
<front>chrome</front>
<back>steel</back>
</wheels>
*/

Before I get onto using JSON in a real life situation let me show you one more thing.

We can assign our JSON data by using a function call, then parse the info within the function like this

function parseTheJSON(car){
alert(car.wheels.front); //alerts chrome
}
parseTheJSON({"wheels":{"front":"chrome", "back":"steel"}});

So we created the function and it receives the JSON data and alerts the message chrome. yay. At last now were ready to start making use of this JSON stuff.

Using JSON & flickr

Flickr has a nice little web service at the back of it. Actually it has a few but the one were interested in is the public photos feed which is free to use and you don't even need to register.

To use it we simply need the service url

http://api.flickr.com/services/feeds/photos_public.gne

By it's self this url will return an atom feed (XML) of photos recently added to flickr. Try it in your browser and you'll see.

This is all fair and well, but we want JSON and more that that we want my pics (or yours).

It's easy enough though the documentation tells us there are a few options so after a quick glance at the documentation we modify our url to include a query string that includes my ID (you'll find this in the url of any user. it's the bit with an @ sign in it) and we want to specify that we want JSON. So now it looks like this.

http://api.flickr.com/services/feeds/photos_public.gne?id=7780044@N06&format=json

Go ahead and try that in your browser and you'll see some wild JSON.

Did you notice anything else. "Yes oh wise HWG" I hear you say "it's all in a handy function called jsonFlickrFeed()".

That's right its all in a nice function so all that left to do is get it in the page and then write the jsonFlickrFeed() function that will parse it.

If your old school you could fake a proxy and do this with an XHR object then eval() it like this
car = eval( "(" + strippedResponseText + ")" );
but that is old school. They stuck that function in there for a purpose. We simply use the script tags src to the donkey work.

<script> function jsonFlickrFeed(fr)
{
for (var i = 0; i < fr.items.length;i++)
{
document.write('<img src="' + fr.items[i].media.m + '">');
}
}
</script>
<script src="http://api.flickr.com/services/feeds/photos_public.gne?id=7780044@N06&format=json"> </script>

You should note a few things here.

firstly my code boxes aren't wide enough for massively long URLs.

Secondly I set up a function, the returned JSON called it, The function then parsed it stepping through each photo and very badly unsemantically output my photos.

Hopefully this enough to get you started with JSON.

Cheers