dylan bathurst

Synopsis of A Marriage of Readernaut’s API and JQuery

These days almost every online community has an API, which is a great way of allowing users to access the content from that site. This post is to show how to use javascript in a couple different ways to pull in content from on of my favorite online communities. Readernaut.com

Readernaut.com is a very cool website created by Nathan Borror. In the past I’ve attempted to add a Currently Reading section to my site, but have lacked the functionality (or time to create the functionality) that I wanted. Readernaut does all that for me!

Technology Stack

There are quite few different pieces of technology being used in this example. The main bullet points to focus on are JSON and the RESTful API. Here is a quick list:

Here is an example of what I am about show, but just in case my site changes (which is fairly often) and the example is no longer being used here is screen capture of my project.

Readernaut’s API uses the RESTful style of architecture for distribution. There are different styles for API design, but we don’t care about them right now.

Down To the Nitty Gritty

To start off with you’ll need to form the url that will return the JSON object with the information you want. If you prefer the data in XML format, it’s as easy as replacing json with xml in the url.

Example:

http://readernaut.com/api/v1/json/dylan/books/

We’ll start off using plain old javascript and then I’ll show how to use the popular javascript library, JQuery, to clean up the code a bit. First you’ll want to link to the appropriate scripts.  Put the first script include to the JSON object directly before the ending body tag. This is so that, by any chance, Readernaut.com were to go down your site would still load.

<script type="text/javascript" src="http://readernaut.com/api/v1/json/dylan/books/?callback=dylanbooks"></script>

Next link to the javascript that handles the UI for your site. This can be placed in the head like you would normally do.

<script type="text/javascript" src="http://www.dylanbathurst.com/wp-content/themes/texturallax/readernaut.js"></script>
function dylanbooks(books){
var bookUl = document.getElementById('books');
var bookCount = books.reader_books;
for(var i=0; i<bookCount.length; i++){
var title = books.reader_books[i].book_edition.title;
var cover = books.reader_books[i].book_edition.covers.cover_medium;
var permalink = books.reader_books[i].permalink;

var listItem = document.createElement("li");

var anchor = document.createElement("a");
anchor.setAttribute("href",permalink);
anchor.setAttribute("title",title);

var image = document.createElement("img");
image.setAttribute("src",cover);
image.setAttribute("alt",title);

anchor.appendChild(image);
listItem.appendChild(anchor);
bookUl.appendChild(listItem);
}
}

What the above code does is pulls in and loops through the JSON object, creates and img, a, and li element for each book. After creating the line item it then appends it to the unordered list element with the id of books that was previously placed in the DOM.

Now that we’ve done the project in plain javascript, I’ll show you how to port it over to JQuery. One of the big advantages to this is cleaning up script tags in the document. First link to a copy of JQuery. I’m using the Google AJAX Libraries API to link to JQuery but something like this will do the trick:

<script type="text/javascript" src="http://yoursite.com/jquery-1.3.2.min.js"></script>

Now in readernaut.js you’ll be able to use JQuery’s built in functions to pull in the JSON object, create the necessary elements, and inject them into the DOM.

$(document).ready(function () {
var bookUl = $("#books");
$.getJSON("http://readernaut.com/api/v1/json/dylan/books/?callback=?",
function(books){
var bookCount = books.reader_books;
$.each(bookCount,function(i){
var title = books.reader_books[i].book_edition.title;
var cover = books.reader_books[i].book_edition.covers.cover_medium;
var permalink = books.reader_books[i].permalink;

var lineItem = $("<li>").appendTo(bookUl);
var bookLink = $("<a>").attr({
href:permalink,
title:title
}).appendTo(lineItem);
$("<img/>").attr({
src:cover,
alt:title
}).appendTo(bookLink);
});
});
});

With the help of .ready event, the javascript won’t start working until the document has already loaded. Thus fixing the problem that was previously solved by linking to the script at the bottom of the document.

Well there you have it. Now all that is left to do is style the new unordered list full of the beautiful books that you’ve been reading. If you’d like some continued reading on Readernaut’s API, check out the google group, or the GetSatisfaction page.