Calling all web hackers - JSON support for Gdata

For those of you who have been trying to build client-side GData mashups but have been thwarted by the same-origin policy, we have some good news for you: you can now get public Base, Blogger, and Calendar feeds as JSON! This means that you can start displaying GData in your web page with a little JavaScript.

Let's take a look at how this works -- start out by opening this URL in your browser (this is the GData feed for the Google Doodle calendar):

http://www.google.com/calendar/feeds/
c4o4i7m2lbamc4k26sc2vokh5g%40group.calendar.google.com/public/full
?orderby=starttime&alt=json-in-script&callback=handleJson

You should see something like this:
handleJson({"version": "1.0","encoding": "UTF-8","feed"...});

What you are looking at is a JavaScript function named handleJson() that is being applied to a big JavaScript object. This object has a hierarchical structure that parallels that of the Atom representation of the feed (you can also read about the details on how the XML to JSON mapping works).

Using the following GET parameters in the URL:
alt=json-in-script&callback=handleJson
tells the feed to return itself in JSON format wrapped in a function named handleJson. The alt type is called json-in-script because this is often useful in conjunction with a <script> tag.

<script>
function handleJson(json) {
alert("The title of the feed is: " + json.feed.title.$t);
}
</script>

<script src="http://www.google.com/calendar/feeds/
c4o4i7m2lbamc4k26sc2vokh5g%40group.calendar.google.com/
public/full?orderby=starttime&alt=json-in-script&callback
=handleJson"></script>

(you might need to fiddle with the linebreaks here)

When you load the above snippet of HTML in a web page, the following happens:

1. The first script tag is loaded, defining a function called handleJson() in the global environment.
2. The second script tag is loaded, which looks for a global handleJson() function, and then applies it to a big JavaScript object. If the order of the script tags were reversed, loading the GData URL would result in a JavaScript error because handleJson() would not have been defined yet.
3. handleJson() pops up the title of the feed because json.feed.title.$t in the JSON representation maps to:
   
<feed>
<title>Google Doodles</title>

   in the Atom representation.
   
   

Admittedly, it takes a bit of exploration to see how the JSON object is structured, but we're planning on releasing a JavaScript client library that provides an abstraction around the JSON just like our other client libraries provide abstractions around the XML. In the meantime, I've created a JSON inspector that works for Firefox browsers, check it out on my blog.

Let us know when you have created some nifty JavaScript widgets for presenting GData on the web!

- Michael Bolin, Software Engineer