Converting ColdFusion query to Javascript object
Posted by Steve Brownlee on December 8, 2008Dec 8
With many developers these days writing web applications using popular Javascript libraries (e.g. Prototype or jQuery), many find themselves having to work with data objects in Javascript to enhance the user experience.
In a recent project, I was implementing a screen that required many popup dialog boxes, related Ajax calls, and periodic status updates to ensure a slick interface to the users without the need for any screen refreshes.
Without going into the nitty, gritty of the business reasons behind all the doo-dads I was creating, I reached a point where I needed to take ColdFusion queries and convert them to Javascript objects in order to push data from function to function.
To avoid further confusion, this function is simply a customization of the existing toScript() function available in ColdFusion (you can see I use it in my code below). What this does is allow you to customize the structure of the resulting Javascript object.
ColdFusion query to Javascript object converter
<cfcomponent displayname="QueryToObject" hint="Converts a ColdFusion query into a simple Javascript object" output="false">
<cffunction name="convert" displayname="convert" hint="Converts a query to a Javascript object" access="public" output="true" returntype="void">
<cfargument name="queryName" displayName="queryName" type="Query" hint="The ColdFusion query to be converted" required="true" />
<cfargument name="objectName" displayName="objectName" type="string" hint="The name of the resulting Javascript object" required="true" />
<cfargument name="idColumn" displayName="idColumn" type="string" hint="The unique identifier column of the query to be used in the Javascript object" required="true" />
<cfset var local = structNew() />
<cfset local.jsMappingStruct = StructNew() />
<cfprocessingdirective suppresswhitespace="true">
<script>
<cfloop query="arguments.queryName">
<cfloop from="1" to="#listLen(arguments.queryName.columnList)#" index="local.c">
<cfset local.colName = listGetAt(arguments.queryName.columnList, local.c) />
<cfset local.cell = arguments.queryName[local.colName][arguments.queryName.currentRow] />
<cfif isDate(local.cell)>
<cfset local.cell = dateFormat(local.cell, "mm/dd/yyyy") />
<cfelseif isNumeric(local.cell)>
<cfset local.cell = val(local.cell) />
</cfif>
<cfset local.jsMappingStruct[local.colName] = local.cell />
</cfloop>
#toScript(local.jsMappingStruct,arguments.objectName & arguments.queryName[arguments.idColumn][arguments.queryName.currentRow],true,false)#
</cfloop>
</script>
<cfreturn />
</cfprocessingdirective>
</cffunction>
</cfcomponent>Making the call
<cfset createObject("component", "utility.data.converters.javascript.QueryToObject").convert(steelers, "steeler.number_", "jerseyNumber") />The results
<script>
steelers.number_43= new Object();
steelers.number_43["first_name"] = "Troy";
steelers.number_43["last_name"] = "Polamalu";
steelers.number_43["position"] = "Safety";
steelers.number_43["nfl_ranking"] = "1";
</script>
Cool stuff but I think this CF function toScript does the same thing:
http://www.cfquickdocs.com/?getDoc=ToScript#ToScript
Wouldn’t you rather have the query in JSON format?
Sam & Todd #2 beat me to my initial thoughts. Also, if you want to improve the script you have, don’t forget about cfsavecontent and cfhtmlhead – they’re lifesavers (instead of outputting directly via cfc).
@Sam. You are correct. In fact, I use the toScript() function in my component. Take a closer look. This is basically an abstraction of the toScript() function to add some customization of what the structure of the Javascript object will be.
@todd sharp. No I wouldn’t. For this particular application, all I need is simple Javascript objects. No real need for serialization.
@Todd Rafferty. Why is it an improvement?
@Steve
I’ll set a function to return a struct. Each struct will contain two keys: success & query. Then, when making my Ajax request I’ll pass returnFormat:’JSON’ as one of the params. CF will automatially convert the query object (this is CF 8 only, CF 7 I’ll use the cfjson.cfc).
Since ColdFusion’s JSON return of query data is a bit non-standard, you may need a custom parser on the client-side. I like to move process to the client whenever I can, to distribute process load. I recently wrote a custom data reader for the Ext library to do just this:
http://blog.cutterscrossing.com/index.cfm/2008/11/20/ColdFusion-Query-Json-Data-Reader
Hey there Cutter. I use JSON exclusively when returning queries from an AJAX call to a CFC. Couldn’t live without it. The way I use this function is not via an AJAX call, it’s invoked directly inside my views.
i want to be opposite the data transfer as convert passing variable data of Javascript to ColdFusion so do you know how to write programming code as possible as you know how to do it. if so , then please give me sample.
thank you