Spry Goodness :: JSON Datasets

March 20, 2007 · 3 Comments

JSON (JavaScript Object Notation) is a lightweight way to transfer data to the browser. It's not as verbose as XML and is much easier for the browser to digest because it does not require any parsing. A simple JS eval() is all that is needed to turn the string into something that the browser can use. For those of us in the ColdFusion world, there is a tool out there called CFJSON that will convert your variables into JSON encoded strings for you. All you need to do after that is output the string. If you want tools like Service Capture to pick up the data properly, you need to set your MIME type to "application/json". Let's take a look at the code used to create a JSON string:

<cfset retArray = arraynew(1)/>
<cfset retStruct = structNew()/>
<cfset encObj = createObject('component', 'jsonDataset.json')>

<cfset tmpStruct = structNew()/>
<cfset tmpStruct.team = "Manchester United">
<cfset tmpStruct.manager = "Alex Ferguson">
<cfset tmpStruct.stadium = "Old Trafford">
<cfset arrayAppend(retArray,tmpStruct)>

<cfset tmpStruct = structNew()/>
<cfset tmpStruct.team = "Arsenal">
<cfset tmpStruct.manager = "Arsene Wenger">
<cfset tmpStruct.stadium = "Emirates Stadium">
<cfset arrayAppend(retArray,tmpStruct)>

<cfset tmpStruct = structNew()/>
<cfset tmpStruct.team = "Liverpool">
<cfset tmpStruct.manager = "Rafael Benitez">
<cfset tmpStruct.stadium = "Anfield">
<cfset arrayAppend(retArray,tmpStruct)>

<cfset tmpStruct = structNew()/>
<cfset tmpStruct.team = "Chelsea">
<cfset tmpStruct.manager = "Jose Mourinho">
<cfset tmpStruct.stadium = "Stamford Bridge">
<cfset arrayAppend(retArray,tmpStruct)>

<cfset retStruct.epl = retArray>

<cfcontent type="application/json">
<cfoutput>#encObj.encode(retStruct)#</cfoutput>

This will create and output a JSON string to the browser when you call it as its own template (in my case, jsonGenerator.cfm). Digesting this with Spry is quite easy. We will need to include a new file: SpryJSONDataSet.js. This will allow us to create our datasets with JSON strings in lieu of XML that had been the only previous option.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
   <head>
      <title>JSON Dataset Example</title>
      <script language="Javascript" type="text/javascript" src="/assets/js/spry/SpryData.js"></script>
      <script language="Javascript" type="text/javascript" src="/assets/js/spry/xpath.js"></script>
      <script language="Javascript" type="text/javascript" src="/assets/js/spry/SpryJSONDataSet.js"></script>
   </head>
   <body>
      <script type="text/javascript">
         var dsTeams = new Spry.Data.JSONDataSet("jsonGenerator.cfm", {path:"EPL"});
      </script>
      
      <div spry:region="dsTeams">
         <div spry:state="loading">Loading Data...</div>
         <div spry:state="error">Error Loading JSON Data</div>
         <div spry:state="ready" spry:repeat="dsTeams">
            <p>
            <strong><span spry:content="Team: "></span></strong><span spry:content="{dsTeams::TEAM}"></span><br/>
            <strong><span spry:content="Manager: "></span></strong><span spry:content="{dsTeams::MANAGER}"></span><br/>
            <strong><span spry:content="Stadium: "></span></strong><span spry:content="{dsTeams::STADIUM}"></span><br/>
            </p>
         </div>
      </div>
   </body>
   
</html>

The line we use to create the JSON dataset is quite similar to the line we use for creating an XML dataset. var dsTeams = new Spry.Data.JSONDataSet("jsonGenerator.cfm", {path:"EPL"}); We have a URL to the data (jsonGenerator.cfm) and the path, which if we look at our data:

{"EPL":[{"STADIUM":"Old Trafford","TEAM":"Manchester United","MANAGER":"Alex Ferguson"},{"STADIUM":"Emirates Stadium","TEAM":"Arsenal","MANAGER":"Arsene Wenger"},{"STADIUM":"Anfield","TEAM":"Liverpool","MANAGER":"Rafael Benitez"},{"STADIUM":"Stamford Bridge","TEAM":"Chelsea","MANAGER":"Jose Mourinho"}]}

We see that "EPL" is the name of the "root" object of our JSON data. A tool like Service Capture will help you visualize this data a little better. Once the data is digested, the beauty of Spry comes in. We simply output our data the same as we do for an XML dataset. No syntax has changed on that part. This means we can seamlessly integrate JSON into where we once had XML and vice versa. JSON datasets are a powerful tool with Spry. In the next in this series, we will look at how we handle nested datasets in Spry with JSON as our source. Working Sample Stay tuned for more Spry goodness!

Spry Goodness :: JSON Datasets

Tags: Adobe · AJAX · ColdFusion · General · JSON · Spry · XML

3 responses so far ↓

1 busby seo test // Jan 13, 2009 at 1:51 AM

Spry Goodness :: JSON Datasets
2 Friendster Layouts // Feb 2, 2009 at 11:58 PM

Great info! I have a blog with the same interest/topic. Hope we can exchange links.<br /><br />Best Regards!<br /><br />Ginj
3 Michael Hogan // Aug 11, 2009 at 6:52 AM

Have you found that the SortOnLoad parameter is not working with the JSON datasets?

Andrew Powell

Into The Mind of A Solutions Architect