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 http://www.google.com/reader/public/javascript/feed/http://www.example.com/feed.rss where http://www.example.com/feed.rss is the url of the feed required as JSON.

An example of the JSON returned for this site’s feed – https://ardoris.wordpress.com/feed/

{"id":"feed/https://ardoris.wordpress.com/feed/",
 "title":"feed/https://ardoris.wordpress.com/feed/",
 "continuation":"CJPduLTt45YC",
 "alternate":{"href":"https://ardoris.wordpress.com","type":"text/html"},
 "updated":1243372714,
 "items":[
   {"id":"tag:google.com,2005:reader/item/be67929ea636a7ad",
     "categories":["General"],"title":"Haskell Snippet – Summing Series #2",
     "published":1243369571,
     "updated":1243369571,
     "alternate":{"href":"https://ardoris.wordpress.com/2009/05/26/haskell-snippet-summing-series-2/",
                      "type":"text/html"},
     "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/https://ardoris.wordpress.com/feed/","htmlUrl":"https://ardoris.wordpress.com"}},
  < ...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 = "http://www.google.com/reader/public/javascript/feed/https://ardoris.wordpress.com/feed/?callback=?";
  $.getJSON(url,
                 function(data) {
                   for(var i = 0; i < data.items.length; i += 1)
                     $('#feed').append('<li>' + data.items[i].title + '');
                 });
});
</script>

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

Advertisements
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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s