My favorites ▼ | English ▼ | Sign in

Sign up for Google I/O 2010 today!

Google Data Protocol

Using JSON in the Google Data Protocol

This article covers JSON as it is used within the Google Data Protocol. For more information about the protocol, view the Developer's Guide.

You can use JSON with any programming language, but the examples in this document are in JavaScript.

About JSON feeds and XML feeds

A Google Data service creates a JSON-format feed by converting the XML feed using the following rules:

Basic

  • The feed is represented as a JSON object; each nested element or attribute is represented as a name/value property of the object.
  • Attributes are converted to String properties.
  • Child elements are converted to Object properties.
  • Elements that may appear more than once are converted to Array properties.
  • Text values of tags are converted to $t properties.

Namespace

  • If an element has a namespace alias, the alias and element are concatenated using "$". For example, ns:element becomes ns$element.

XML

  • XML version and encoding attributes are converted to are converted to version and encoding attributes of the root element, respectively.

The following example shows XML and JSON versions of the same feed. They are tabbed to provide easy comparison.

<?xml version="1.0" encoding="UTF-8" ?>
<feed xmlns="http://www.w3.org/2005/Atom"
    xmlns:openSearch="http://a9.com/-/spec/opensearchrss/1.0/"
    xmlns:gd="http://schemas.google.com/g/2005"
    xmlns:gCal="http://schemas.google.com/gCal/2005">
  <id>...</id>
  <updated>2006-11-12T21:25:30.000Z</updated>
  <title type="text">Google Developer Events</title>
  <subtitle type="text">The calendar contains information about upcoming
    developer conferences at which Google will be speaking, along with
    other developer-related events.</subtitle>
  <link rel="http://schemas.google.com/g/2005#feed"
    type="application/atom+xml" href="..." />
  <link rel="self" type="application/atom+xml" href="..." />
  <author>
    <name>Google Developer Calendar</name>
    <email>developer-calendar@google.com</email>
  </author>
  <generator version="1.0"
    uri="http://www.google.com/calendar">Google Calendar</generator>
  <openSearch:startIndex>1</openSearch:startIndex>
  <openSearch:itemsPerPage>25</openSearch:itemsPerPage>
  <gCal:timezone value="America/Los_Angeles" />
    
  <entry>
    <id>...</id>
    <published>2006-11-12T21:25:30.000Z</published>
    <updated>2006-11-12T21:25:30.000Z</updated>
    <category scheme="..." term="..." />
    <title type="text">WebmasterWorld PubCon 2006:
      Google Developer Tools in General</title>
    <content type="text">Google is sponsoring at 
      <a href="http://www.pubcon.com/">WebmasterWorld PubCon 2006</a>. Come and
      visit us at the booth or join us for an evening demo reception where we
      will be talking "5 ways to enhance your website with Google Code". 
      After all, it is Vegas, baby! See you soon.</content>
    <link rel="alternate" type="text/html" href="..." title="alternate" />
    <link rel="self" type="application/atom+xml" href="..." />
    <author>
      <name>Google Developer Calendar</name>
      <email>developer-calendar@google.com</email>
    </author>
    <gCal:sendEventNotifications value="true" />
    <gd:comments>
       <gd:feedLink href="..." />
    </gd:comments>
    <gd:transparency value="..." />
    <gd:eventStatus value="..." />
    <gd:where valueString="3150 Paradise Road, Las Vegas, NV 89109" />
    <gd:when startTime="2006-11-15" endTime="2006-11-17">
      <gd:reminder minutes="10" />
    </gd:when>
  </entry>
  ...
</feed>
    
{
  "version": "1.0",
  "encoding": "UTF-8",
  "feed": {
    "xmlns": "http://www.w3.org/2005/Atom",
    "xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
    "xmlns$gd": "http://schemas.google.com/g/2005",
    "xmlns$gCal": "http://schemas.google.com/gCal/2005",
    "id": {"$t": "..."},
    "updated": {"$t": "2006-11-12T21:25:30.000Z"},
    "title": {
      "type": "text",
      "$t": "Google Developer Events"
    },
    "subtitle": {
      "type": "text",
      "$t": "The calendar contains information about upcoming developer 
       conferences at which Google will be speaking, along with other 
       developer-related events."
    },
    "link": [{
      "rel": "...",
      "type": "application/atom+xml",
      "href": "..."
      },{
      "rel": "self",
      "type": "application/atom+xml",
      "href": "..."
    }],
    "author": [{
      "name": {"$t": "Google Developer Calendar"},
      "email": {"$t": "developer-calendar@google.com"}
    }],
    "generator":{
      "version": "1.0",
      "uri": "http://www.google.com/calendar",
      "$t": "Google Calendar"
    },
    "openSearch$startIndex": {"$t": "1"},
    "openSearch$itemsPerPage": {"$t": "25"},
    "gCal$timezone": {"value": "America/Los_Angeles"},

    "entry": [{
      "id": {"$t": "..."},
      "published": {"$t": "2006-11-12T21:25:30.000Z"},
      "updated": {"$t": "2006-11-12T21:25:30.000Z"},
      "category": [{
        "scheme": "...",
        "term": "..."
      }],
      "title":{
        "type": "text",
        "$t": "WebmasterWorld PubCon 2006: Google Developer Tools in General"
      },
      "content": {
        "type": "text",
        "$t": "Google is sponsoring at
          <a href="http://www.pubcon.com/">WebmasterWorld PubCon 2006</a>.
          \nCome and visit us at the booth or join us for an evening demo
          reception where we will be talking "5 ways to enhance your website
          with Google Code".\nAfter all,\nit is Vegas, baby! See you soon."
      },
      "link": [{
        "rel": "alternate",
        "type": "text/html",
        "href": "...",
        "title": "alternate"
        },{
        "rel": "self",
        "type": "application/atom+xml",
	    "href": "..."
      }],
      "author": [{
        "name": {"$t": "Google Developer Calendar"},
        "email": {"$t": "developer-calendar@google.com"}
      }],
      "gd$transparency": {"value": "http://schemas.google.com/g/2005#event.opaque"},
      "gd$eventStatus": {"value": "http://schemas.google.com/g/2005#event.confirmed"},
      "gd$comments": {"gd$feedLink": {"href": "..."}},
      "gCal$sendEventNotifications": {"value": "true"},
      "gd$when": [{
        "startTime": "2006-11-15",
        "endTime": "2006-11-17",
        "gd$reminder": [{"minutes": "10"}]
      }],
      "gd$where": [{"valueString": "3150 Paradise Road,Las Vegas,NV 89109"}]},
    }]
  }
}

Requesting and using JSON feeds

Atom is Google Data's default format. If you don't specify an alt parameter in your request, then you receive an Atom feed.

Note: The Google Data client libraries don't currently support JSON.

JSON output

To request a response in JSON format, use the alt=json parameter.

For example, to request Google's developer calendar feed in JSON format, send the following query:

http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json

The simplest way to use JSON in a JavaScript web app is to evaluate the JSON response using the eval() function. Evaluating the JSON allows you to directly assign it to a variable in your JavaScript code.

var myObj = eval( '(' + JSON_response + ')' );

JSON-in-script output

To request a response that wraps JSON in a script tag, use the alt=json-in-script parameter and add a callback function by adding the callback=functionName parameter.

http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json-in-script&callback=myFunction

Using callback functions allows you get around some of the cross-domain security issues you might encounter in typical client side JavaScript. Usually browsers prevent you from loading files across domains because of potential security holes and the cross domain attacks that could result.

The JSON-in-script format allows you to get around these restrictions by loading the response in a script tag on the client. This means that you can use the response in other places in your JavaScript code on that page. The JSON output is loaded when the page is loaded; no other tricks are needed.

The simple working application below demonstrates this technique:

<h3>Upcoming Google Developer Events</h3>

<div id="agenda"></div>

<script>
  function listEvents(root) {
    var feed = root.feed;
    var entries = feed.entry || [];
    var html = ['<ul>'];

    for (var i = 0; i < entries.length; ++i) {
      var entry = entries[i];
      var title = entry.title.$t;
      var start = (entry['gd$when']) ? entry['gd$when'][0].startTime : "";	

      html.push('<li>', start, ' ', title, '</li>');
    }

    html.push('</ul>');
    document.getElementById("agenda").innerHTML = html.join("");
  }
</script>

<script src="http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json-in-script&callback=listEvents">
</script>

Samples

For working examples of how to use JSON with the Google Data APIs, see the samples page.

Additional resources

There are several external resources that you may want to check out to learn more about JSON and using JSON in web applications.

Back to top