Calling all web hackers – JSON support for Gdata
November 21st, 2006 | Published in Google Code
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:
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:
tells the feed to return itself in JSON format wrapped in a function named
(you might need to fiddle with the linebreaks here)
When you load the above snippet of HTML in a web page, the following happens:
Let us know when you have created some nifty JavaScript widgets for presenting GData on the web!
- Michael Bolin, Software Engineer
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
tag.
(you might need to fiddle with the linebreaks here)
When you load the above snippet of HTML in a web page, the following happens:
- The first script tag is loaded, defining a function called handleJson() in the global environment.
- 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.
- handleJson() pops up the title of the feed because json.feed.title.$t in the JSON representation maps to:
Google Doodles
in the Atom representation.
Let us know when you have created some nifty JavaScript widgets for presenting GData on the web!
- Michael Bolin, Software Engineer