Thursday, July 9th, 2009

Pimping JSON – YQL now offers JSONP-X!

Category: JavaScript, JSON, Yahoo!

<p>Yesterday’s announcement of Yahoo’s YQL now supporting insert, update and delete overshadowed another interesting new feature: JSONP-X output.

Here’s what it is and why it is useful: YQL data can be returned in XML which is annoying to use in JavaScript (for starters because of crossdomain issues in Ajax). JSON is much easier as it is native to JavaScript. JSON-P makes it even more easy for us to use as JSON data wrapped in a function call allows us to get the data by creating script nodes dynamically.

Where it falls apart is when you want to get back HTML from some system (not on your own server) and use it in JavaScript. You either need to convert the XML to JavaScript and create HTML elements from it or you need to loop through a JSON construct and assemble HTML from it. JSONP-X works around that step for you. In essence it is XML as a string returned inside a JSON object.

XML:

  1. <results>
  2.   <div id="following">
  3.     <span>
  4.       <a href="http://twitter.com/codepo8">Codepo8</a>
  5.     </span>
  6.   </div>
  7. </results>

JSON:

javascript
< view plain text >
  1. {"results":[
  2.   "div":{
  3.     "id":"following",
  4.    "span":{
  5.      "a":{
  6.        "href":"http://twitter.com/codepo8",
  7.        "text":"Codepo8"
  8.      }
  9.    }
  10.  }
  11. ]}

JSON-P:

javascript
< view plain text >
  1. foo({"results":[
  2.   "div":{
  3.     "id":"following",
  4.    "span":{
  5.      "a":{
  6.        "href":"http://twitter.com/codepo8",
  7.        "text":"Codepo8"
  8.      }
  9.    }
  10.  }
  11. ]})

JSONP-X:

javascript
< view plain text >
  1. foo({"results":[
  2. "<div id=\"following\"><span><a href=\"http://twitter.com/codepo8\">Codepo8</a></span></div>"
  3. ]})

The way to invoke the JSONP-X output is to provide a format parameter of xml and a callback parameter.

This allows me for example to get the list of people I follow on twitter from my twitter homepage and display it in another document with a few lines of JavaScript without any need of using the API or having a local proxy:

  1. <script type="text/javascript" charset="utf-8">
  2. function foo(o){
  3.   var out = document.getElementById('container');
  4.   var content = o.results[0]
  5.   out.innerHTML = content.replace(/href="\//g,'href="http://twitter.com/');
  6. }
  7. </script>    
  8. <script type="text/javascript" src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Ftwitter.com%2Fcodepo8%22%20and%20xpath%20%3D%20%22%2F%2Fdiv[%40id%3D%27following_list%27]%22&format=xml&callback=foo">
  9. </script>

More details on this are available in this blog post.

Posted by Chris Heilmann at 10:48 am
4 Comments

++---
2.3 rating from 40 votes

4 Comments »

Comments feed TrackBack URI

Nifty. Not enough cross-polination of data formats goes on.
I once saw a bunch of techies laugh at an xml document that wrapped a csv. Why is that funny? Csv’s parse a zillion times after and the xml could be used to describe the csv metadata.

Shame on people for not trying more stuff like this.

Comment by ilazarte — July 9, 2009

I don’t think that example is a proper conversion from (x|ht)ml to json. There is no differentiation between attributes and elements, also the order of elements is not represented appropriately so the meaning is lost.

Comment by TNO — July 9, 2009

It’s not that hard to generate XML/HTML from JSON. This just makes it harder to access specific elements or properties, you have to traverse the structure.

Comment by ricardobeat — July 9, 2009

JSON return from YQL had been possible before the recent insert/update/delete changes were made. All you needed to do was append &format=json&callback=callback to your YQL url.

Comment by Ahrjay — July 9, 2009

Leave a comment

You must be logged in to post a comment.