Confession time: I’ve never actually worked with a JSON feed.
No, really.
I know what you’re thinking… Yes, you’re right. I’ve built a bunch of Ajax-y components and one full blown application over the past two years.
No, in light of that it doesn’t make any sense that I haven’t used JSON before.
Anyway, I’ve been helping out one of our developers at work with My Big Javascript Brain™ and I’ve had to mess about with JSON a little bit. She’s ostensibly a Java developer, but she’s shown a willingness to help out wherever she can (thereby learning a bunch of other web technologies,) so this week she’s been tasked with creating a JSON fed Google widget. This has been interesting for me, as I’ve had to guess a lot and leap at solutions at every turn to try to help her (since I have no practical experience with the acronym myself.) The good thing is I’ve actually been helpful. Apparently I’ve soaked up enough about JSON through osmosis or something, because when that feeble amount was blended with my regular JS knowledge I was actually able to piece together some of what was going on. Go me.
Anyway, to actually know what I’m doing the next time, I’ve decided to play around with some feeds right here and write up what I discover to help solidify my own knowledge and to help out anyone else who might be wondering about the magical world of JSON feeds.
Did I mention that they were magical? They are. They’re made of pixie dust and rainbows.
Yes, I’ve gone slightly off the rails… ignore that last bit.
To start with, I decided to use the handy feed from one of my favorite web twenty web sites, del.icio.us. Not surprisingly, since del.icio.us kicks all kinds of ass, they make it dead easy to use JSON feeds. All it takes is attaching the script generated at http://del.icio.us/feeds/json/user_name to a document and a Delicious JavaScript object is automatically created- full of all sorts of social bookmarking goodness. Notably a posts array which contains all of the selected user’s posts.
You can read their concise documentation here. They have a nifty sample as well.
Here’s the example I whipped up. This grabs the last 15 bookmarks from my account, takes the link, description and tags and drops them all into a regular old unordered list*.
Here’s the feed itself. As you can see it contains a simple test to see if the Object already exists, an object definition and then an array populated with all of the post data. Pretty straightforward, really.
The following code sample shows how I did it. My comments are inline and in blue.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JSON part 1</title>
<!--Seriously. This is all it takes to get the object into your document.
That's really cool, right? I think so-->
<script type="text/javascript" src="http://del.icio.us/feeds/json/rob_react"></script>
<script type="text/javascript">
window.onload = function() {
//this is the built in delicious object.
//the array posts has all the stuff we're looking for.
//let's make a quick reference to it
var del = Delicious.posts;
var d_div = document.getElementById("delicious");
// create a placeholder for the link
var the_link=""
//****As a note, I've found writing out innerHTML
//****to be faster, so I use it.
//****I actually prefer the elegance of JavaScript's
//****DOM based node creation and manipulation methods.
//**** but speed roolz, so I play with strings
//**** sometimes this stuff can get really confusing,
//**** though, so I'll fall back and use
//**** the DOM stuff anyway.
//**** Anyway, back to the script...
//write the beginning of the <UL>
d_div.innerHTML = "<ul>"
//loop through every element in the Delicious.posts object and do stuff
for (i=0;i<del.length;i++) {
//look at me, I'm doing stuff!
//clear the placeholder for the link
the_link="";
// add in the opening of the LI and the opening of the anchor
// add a reference to the u (url) of the i member of the del array
// and the d (description) of the same memberr
the_link ="<li><a href='"+del[i].u+"'>"+del[i].d+"</a>";
//are there tags? is there a tags array of the i member?
if (del[i].t) {
//if so lets write them out
the_link +=" <em>tags:</em> "
//loop through all the mambers of the t (tag) array
for (j=0;j<del[i].t.length;j++) {
//and build another link
//here I'm using the simple, but powerful URL scheme
//that delicious uses to nice effect
//by dropping the the tag onto the end of my delicious url
//I'm easily building out links to my tags
//they use a logical, transparent url scheme which makes
//it crazy easy to navigate both as a user and as a programmer
//go delicious go.
the_link +="[ <a href='http://del.icio.us/rob_react/"+del[i].t[j]+"'>"+del[i].t[j] +"</a> ]"
}
}
//close out the li
the_link += "</li>"
//pop that link and li into the div
d_div.innerHTML += the_link
}
//once the loop is done, close the ul
d_div.innerHTML += "</ul>"
//and that's that. like I said, pure magic.
}
</script>
<style type="text/css">
/*I've got style*/
body {
color:#666;
/*by the way, shorthand is your friend!*/
font: .825em/1.8em Verdana, Arial, Helvetica, sans-serif;
}
em {
color:green;
margin-left:10px;
}
</style>
</head>
<body>
<div id="delicious">
</div>
</body>
</html>
And that’s that- a run-through of the simplest possible usage of a JSON feed (at least in terms of extracting the data.) Next time (which should be soon) I’ll look at different methods for getting dynamic data out of JSON. Oh, the fun we’ll have.
(part 2 of this series | part 3 of this series)
*The note is also available- I’ll use that in my next example.