Using CFC data with Handlebars

This post is more than 2 years old.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by andy matthews posted on 5/11/2012 at 7:03 PM

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.

Comment 2 by Raymond Camden posted on 5/11/2012 at 7:04 PM

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.

Comment 3 by Sam Farmer posted on 5/11/2012 at 7:31 PM

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.

Comment 4 by Jim O&aposKeefe posted on 5/11/2012 at 7:33 PM

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?

Comment 5 by Raymond Camden posted on 5/11/2012 at 7:37 PM

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. :)

Comment 6 by Gene posted on 5/11/2012 at 8:33 PM

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.

Comment 7 by Raymond Camden posted on 5/11/2012 at 9:57 PM

@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.

Comment 8 by Cutter posted on 5/11/2012 at 10:11 PM

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:


Comment 9 by Raymond Camden posted on 5/11/2012 at 10:12 PM

Awesome - thanks for sharing that!

Comment 10 by Adrian J. Moreno posted on 5/12/2012 at 2:54 AM

Ask and ye shall recieve.

Comment 11 by Andrew Scott posted on 5/12/2012 at 6:04 AM

Not to mention this has been around for 5 years

Which serialise json as well to what ExtJS and other JS frameworks had set the standard format too.

Comment 12 by Brad P. posted on 5/9/2013 at 2:41 AM

Thank you for this Ray1 I've been stuck on trying to display the returned data.