Processing an RSS Feed with Javascript using Google Reader + JSON + jQuery

Instead of having to use one of the various javascript rss libraries, one can take advantage of google reader’s (undocumented) api.

note: the following assumes that the jQuery library is being used

Google Reader gives any rss/atom feed in JSON format, by visiting the url where is the url of the feed required as JSON.

An example of the JSON returned for this site’s feed –

     "categories":["General"],"title":"Haskell Snippet – Summing Series #2",
     "content":"\n\nJust a little hack using show to make the earlier summing series examplelook a bit nicer.\n\nStart with what I had before:\n\nsumseries a b f \u003d sum[f n|n\u003c-[a..b]]\n\nI have swapped around and renamed the arguments a little, just to tidy it up \na tad.\nSumming ...","author":"jebavarde","likingUsers":[],"comments":[],"annotations":[],"origin":{"streamId":"feed/","htmlUrl":""}},
  < ...more entries here ...>

Processing the feed is therefore as simple as iterating over the items.

Example: listing the titles of all items in the feed in an unordered list of id feed

Put the following somewhere in the of the page

<ul id="feed">

Then in the head, add something like the following:

<script type="text/javascript">
$(document).ready(function() {
  var url = "";
                 function(data) {
                   for(var i = 0; i < data.items.length; i += 1)
                     $('#feed').append('<li>' + data.items[i].title + '');

This can of course be extended by

  • adding links to the feed items (to the url found at data.items[i].alternate.href)
  • following each title with a content summary (data.items[i].content)
  • only processing the first so many entries in the feed (for(var i = 0; i < data.items.length && i < 3; i += 1))

n.b. This can also be used with atom feeds – just pass an atom feed in the url instead

Processing an RSS Feed with Javascript using Google Reader + JSON + jQuery

3 thoughts on “Processing an RSS Feed with Javascript using Google Reader + JSON + jQuery

  1. Yes this is exactly what i’m looking for. It works great. However i would like to only show my annotations instead of the post content.

    i tried to replace, data.items[i].content with data.items[i].annotations.content

    That did not work. Can someone point me in the right direction?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s