Another interesting YQL feature: XML with callback (JSON-P-X)

Yesterday’s announcement of YQL now supporting insert, update and delete somehow overshadowed another interesting new feature: XML with callback!

XML with callback?

On first glance having a callback parameter on an XML output doesn’t make any sense. The normal use case of callbacks is to turn JSON data into JSON-P so that you can use the data immediately in JavaScript. The reason for XML with callback is to make it easier to use the same data when getting data from the web. Say I want to use YQL to get the images and links of the people I follow from twitter. The YQL statement is:

select * from html where url="http://twitter.com/codepo8" 
and xpath = "//div[@id='following_list']"

The XML output of this call is a pretty hefty XML document with all the HTML as an XML node structure.

The JSON (and JSON-P output) is even worse as it gives you a structure of all the elements and their attributes as properties of nested objects:

div: {
  id: "following_list"
  span: [
    {
      a: {
        href: "/jemimakiss"
        hreflang: "en"
        rel: "contact"
        title: "Jemima Kiss"
        img: {
          alt: "Jemima Kiss"
          height: "24"
          src: "http://s3.amazonaws.c...glasto_mini.jpg"
          width: "24"
        }
      }
    }
  //... and so on ...

Converting this back into HTML could be quite an annoying job - not to say slow. This is why YQL now offers the callback parameter for XML. The JSONP-X output as it is called in the YQL changelog makes this task a lot easier by returning a JSON object with the XML as a string:

foo({
  "query":{
    "count":"1","created":"2009-07-09T02:44:07Z","lang":"en-US",
    "updated":"2009-07-09T02:44:07Z","uri":"http://...g_list%27%5D%22",
    "diagnostics":{
      "publiclyCallable":"true",
      "url":{
      "execution-time":"1220","proxy":"DEFAULT",
      "content":"http://twitter.com/codepo8"
      },
      "user-time":"1227","service-time":"1220","build-version":"2174"
    }
  },
  "results":[
    "<div id=\"following_list\"><span class=\"vcard\"><a class=\"url\" href=\"/jemimakiss\" hreflang=\"en\" rel=\"contact\" title=\"Jemima Kiss\"><img alt=\"Jemima Kiss\" class=\"photo fn\" height=\"24\" src=\"http://s3.amazonaws.com/twitter_production/profile_images/80996825/glasto_mini.jpg\" width=\"24\"/><\/a><\/span> [...] <\/div>"
    ]
});

This makes it dead easy to render the results back as HTML:

<script type="text/javascript" charset="utf-8">
function foo(o){
  var out = document.getElementById('container');
  var content = o.results[0]
  out.innerHTML = content.replace(/href="\//g,'href="http://twitter.com/');
}
</script>    
<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">
</script>

Nice? I think so!

Tags: javascript, JSON, json-p, json-p-x, jsonp-x, xml, yql

This entry was posted on Thursday, July 9th, 2009 at 4:20 pm and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.