Tuesday, November 21, 2006

JSON Inpsector (for GData)

Yesterday, I was very excited to announce JSON support for GData on the Google Data APIs Blog. Even though we provided some nice documentation and samples for this new feature, I thought it would be helpful to be able to browse the structure of the JSON returned by the feed in a standard tree widget.

In Chickenfoot, you can inspect a JavaScript object fairly easily by leveraging the DOM Inspector:


function inspect(obj) {
// explore obj in Firefox's DOM Inspector
window.openDialog('chrome://inspector/content/object.xul',
'_blank', 'chrome,all,dialog=no', obj);
}


Unfortunately, this JavaScript does not work in a web page because it needs access to the browser chrome. Because not everyone has Chickenfoot installed, I decided to make an online JSON Inspector for GData feeds (shown below) where you can simply enter the URL for a GData feed and click Show me the JSON! to explore its structure with a standard XUL tree widget. (Because this web page uses XUL, it only works in Firefox.)

Hopefully this will help you write your first GData mashup over the Thanksgiving holiday! You'd rather hack on JavaScript than fight your way through the mall on Black Friday, right?

Update (11/22/2006): Mihai just pointed me to an existing JSON Inpsector targeted at JSONP (JSON with Padding), which lets you inspect JSON from sources other than GData.


Screenshot of JSON Inspector for GData


P.S. If any of you decide to host XUL files on your own webserver, make sure to add the following line to httpd.conf or else your XUL trees may appear strangely:


AddType application/vnd.mozilla.xul+xml .xul

6 comments:

  1. [...] また、冒頭のGoogle公式ブログの著者がJSON Inspectorなるアプリを公開している。 Bolinfest Changeblog » JSON Inpsector (for GData) [...]

    ReplyDelete
  2. Hi, what is the license of this program? Can I modify it and use it? Am I allowed to redistribute it? (I'm wondering if I can bundle this to my web application)

    ReplyDelete
  3. I looked at the Google Data API for Docs and Spreadsheets and something dawned on me.

    You can read spreadsheet rows using RSS and JSON.

    You can post new rows to add to your spreadsheet.

    Seems like it would be relatively simple to build an AJAX guestbook that stores data in a spreadsheet instead of your own hosting company's MySQL installation.

    I wonder if someone wants to take the bait?

    ReplyDelete
  4. [...] I’ve found Michael Bolin’s JSON Inspector very useful when checking JSON output. [...]

    ReplyDelete
  5. [...] http://www.bolinfest.com/changeblog/2006/11/22/json-inpsector-for-gdata/ Tags: json, javascript, gdata, firefox, inspector, debug, dev, xul, tree, dump(del.icio.us history) [...]

    ReplyDelete
  6. [...] During the development, I’ve found Eyal’s JSON Viewer handy (even I have to cut & paste JSON data from cURL output) since browsers do not render response which content type is “application./json”, while you can view unformatted JSON with Firebug’s network monitoring. Does anyone know anything like Michael Bolin’s JSON Inspector? [...]

    ReplyDelete