Earlier this week Steve wrote to me asking how to use data retrieved in a ColdFusion Component in a Handlebars template. While ColdFusion makes it trivial to serve up query data via JSON, the result format isn't always easy to use in JavaScript utilities. Here's a quick example I wrote that demonstrates how to work around this.
First - I wrote a CFC that returned a static query - just for testing. It has three columns: id, mileage, and traveldate. Note that I'm using the ColdFusion 10 format for creating static queries.
Now, let's look at a simple front end. All this template needs to do is use Ajax to fetch the data and display it via Handlebars:
Pretty simple - document loads - we do the Ajax request - and for now - not much else. But notice I dumped the data to the console. If you've never seen how a query comes across the wire in JSON, it consists of two parts: A COLUMNS array that is an array of columns. (Duh.) and a DATA array which is an array of arrays. The Nth item in each array represents the Nth item in the COLUMNS array.
(As a quick aside - you can return an alternative version of query data if you pass in an additional URL argument. It's different, but not much 'nicer' in terms of what we need to do here.)
So, one way to handle this would be to simply convert it into an array. You will notice our Handlebar template is expecting an array of "records" with keys mileage and traveldate. Here was my first fix:
Pretty simple, right? One thing that kinda bothers me though is that the code makes assumptions on the columns. That isn't terribly dangerous (you always have to make some assumptions), but the code feels a bit brittle. I've got a simple JavaScript function that converts queries returned by CFCs into a simple array of objects:
This allows us to do the conversion and pass it to Handlebars a bit nicer:
Any thoughts? You could - of course - modify the CFC to simply return an array of structs.
Archived Comments
I absolutely hate that ColdFusion returns JSON in a non-standard format. Yes it might be "better" from a data transfer perspective but it guarantees that you'll have to manipulate the data either server side or client side before actually using it.
I disagree completely, Mr. Mathews. This is very much JSON format. It's just in a style that isn't helpful.
Yes - I'm being picky. ;) But when you say "standard" I think it implies something. It _is_ JSON.
ColdFusion serializes entities beautifully preserving the case of the properties and everything.
We've found serializing entities much easier to work with templating engines than the query object.
Ray, 2 quick questions - I've only used console.log, what is console.dir? Also in the callback function when you call the cfc, what's that second argument "code" about?
console.dir creates a 'tree' like view of data. Think of it like cfdump. On Firefox/Firebug it is nicely rendered out. On Chrome, it's a tree you have to manually open. I prefer the Firebug method. But - just consider it a way to handle complex data. I believe, in Chrome, console.log works fine for complex objects too... I just like being specific. ;)
jQuery Ajax events return the data and a status code. If you care about it, you can look at it and respond to it. I don't. :)
Another way to render a more friendly json format, is to write another CFC function which takes a query and converts it to an array of structs (then returns in json format). Its an extra step but letting CF handle it might be easier, so the javascript can be simple. We do this where I work.
@Gene: Yep, good idea. I did mention that at the _very_ end though. :) Would an example of that be helpful? Basically the CF version of my cfNormalizeQuery.
I have a JQuery Plugin, serializeCFJSON, up on GitHub. It will convert the CF native query JSON return to the proper setup. In fact, I used it with HandlebarsJS in my ajaxPager project demo (also on GitHub). You can see it in the ajaxPager demo:
http://examples.cutterscros...
Awesome - thanks for sharing that!
Ask and ye shall recieve.
http://iknowkungfoo.com/blo...
Not to mention this has been around for 5 years
http://www.epiphantastic.co...
Which serialise json as well to what ExtJS and other JS frameworks had set the standard format too.
Thank you for this Ray1 I've been stuck on trying to display the returned data.