Spry Goodness :: Nested JSON Datasets

March 20, 2007 · No Comments

Let's use our jsonGenerator.cfm file again to build our JSON. This time, we're going to make it a bit more complex than in the previous example. We will have an array of structs, as before, but we will add another element to the strcutures: a sub-array of structures for each element. The ColdFusion will look like this:

<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 tmpStruct.players = arraynew(1)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Cristiano Ronlado">
<cfset playerStruct.postion = "Midfield">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Ryan Giggs">
<cfset playerStruct.postion = "Midfield">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Wayne Rooney">
<cfset playerStruct.postion = "Forward">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Rio Ferdinand">
<cfset playerStruct.postion = "Midfield">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset arrayAppend(retArray,tmpStruct)>

<cfset tmpStruct = structNew()/>
<cfset tmpStruct.team = "Arsenal">
<cfset tmpStruct.manager = "Arsene Wenger">
<cfset tmpStruct.stadium = "Emirates Stadium">
<cfset tmpStruct.players = arraynew(1)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Thierry Henry">
<cfset playerStruct.postion = "Forward">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Cesc Fabregas">
<cfset playerStruct.postion = "Midfield">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Gilberto Silva">
<cfset playerStruct.postion = "Midfield">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Jens Lehmann">
<cfset playerStruct.postion = "Goalkeeper">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset arrayAppend(retArray,tmpStruct)>

<cfset tmpStruct = structNew()/>
<cfset tmpStruct.team = "Liverpool">
<cfset tmpStruct.manager = "Rafael Benitez">
<cfset tmpStruct.stadium = "Anfield">
<cfset tmpStruct.players = arraynew(1)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Craig Bellamy">
<cfset playerStruct.postion = "Forward">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Steven Gerrard">
<cfset playerStruct.postion = "Midfield">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Peter Crouch">
<cfset playerStruct.postion = "Forward">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Xabi Alonso">
<cfset playerStruct.postion = "Midfield">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset arrayAppend(retArray,tmpStruct)>

<cfset tmpStruct = structNew()/>
<cfset tmpStruct.team = "Chelsea">
<cfset tmpStruct.manager = "Jose Mourinho">
<cfset tmpStruct.stadium = "Stamford Bridge">
<cfset tmpStruct.players = arraynew(1)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Didier Drogba">
<cfset playerStruct.postion = "Forward">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Michael Ballack">
<cfset playerStruct.postion = "Midfield">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Andriy Shevchenko">
<cfset playerStruct.postion = "Forward">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset playerStruct = structNew()/>
<cfset playerStruct.name = "Frank Lampard">
<cfset playerStruct.postion = "Midfield">
<cfset arrayAppend(tmpStruct.players, playerStruct)>
<cfset arrayAppend(retArray,tmpStruct)>

<cfset retStruct.epl = retArray>

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

This will return us a JSON string like this:

{"EPL":[{"STADIUM":"Old Trafford","PLAYERS":[{"NAME":"Cristiano Ronlado","POSTION":"Midfield"},{"NAME":"Ryan Giggs","POSTION":"Midfield"},{"NAME":"Wayne Rooney","POSTION":"Forward"},{"NAME":"Rio Ferdinand","POSTION":"Midfield"}],"TEAM":"Manchester United","MANAGER":"Alex Ferguson"},{"STADIUM":"Emirates Stadium","PLAYERS":[{"NAME":"Thierry Henry","POSTION":"Forward"},{"NAME":"Cesc Fabregas","POSTION":"Midfield"},{"NAME":"Gilberto Silva","POSTION":"Midfield"},{"NAME":"Jens Lehmann","POSTION":"Goalkeeper"}],"TEAM":"Arsenal","MANAGER":"Arsene Wenger"},{"STADIUM":"Anfield","PLAYERS":[{"NAME":"Craig Bellamy","POSTION":"Forward"},{"NAME":"Steven  Gerrard","POSTION":"Midfield"},{"NAME":"Peter Crouch","POSTION":"Forward"},{"NAME":"Xabi Alonso","POSTION":"Midfield"}],"TEAM":"Liverpool","MANAGER":"Rafael Benitez"},{"STADIUM":"Stamford Bridge","PLAYERS":[{"NAME":"Didier Drogba","POSTION":"Forward"},{"NAME":"Michael Ballack","POSTION":"Midfield"},{"NAME":"Andriy Shevchenko","POSTION":"Forward"},{"NAME":"Frank Lampard","POSTION":"Midfield"}],"TEAM":"Chelsea","MANAGER":"Jose Mourinho"}]}

As you can see, it's slightly more elaborate than the JSON string from the previous article. The code to display this is not too different from the previous article, either. We need to include an additional JS file: SpryNestedJSONDataSet.js . This will allow us to create nested datasets from previously created datasets. The code to display the nested datasets is as follows:

<!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>
      <script language="Javascript" type="text/javascript" src="/assets/js/spry/SpryNestedJSONDataSet.js"></script>
   </head>
   <body>
      <script type="text/javascript">
         var dsTeams = new Spry.Data.JSONDataSet("jsonGenerator.cfm?nested=1", {path:"EPL"});
         var dsPlayers = new Spry.Data.NestedJSONDataSet(dsTeams, "PLAYERS");
      </script>
      
      <div spry:region="dsTeams dsPlayers">
         <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>
            <ul spry:repeatchildren="dsPlayers">
               <li>{dsPlayers::NAME} - {dsPlayers::POSTION}</li>
            </ul>
         </div>
      </div>
   </body>
   
</html>

Notice how we create our nested dataset: var dsPlayers = new Spry.Data.NestedJSONDataSet(dsTeams, "PLAYERS"); It conatains a reference to the parent dataset and the element within that dataset on which we will build this child dataset. To display the dataset, we simply create region with both datasets: <div spry:region="dsTeams dsPlayers">....</div> This tells Spry that we will be using both datasets in this region. We simply spry:repeat over them as we need them. Because we are reading off of a dataset that has alredy been loaded to create our nested dataset, we do not have to do another round trip to the server to get the data. Nested datasets are useful for pushing a large amount of complex, related data at once and parsing it out as the user sees fit. Working Sample