Understanding the various Coldfusion JSON responses and how to use them.

sbenjamin — Mon, 03 Jan 2011 19:06:25 +0000

ExtJS Data grid with Coldfusion JSON Responses from Steven Benjamin on Vimeo.

This tutorial address some of the challenges that Coldfusion developers face when integrating the ExtJS client side framework with Coldfusion JSON responses. There are many examples of ExtJS integration with php, java, .net and other languages that respond with a well formatted Row based JSON object. But I haven't seen any Coldfusion examples,
so I thought I would give it a try here.

{"ROWS":[

{"FIRSTNAME":"Steven","STATE":"AZ","ZIP":85251.0,"MEMBERID":1,"ADDRESS":"4906 N 74th St","CITY":"Scottsdale","LASTNAME":"Benjamin"},
{"FIRSTNAME":"Arnold","STATE":"NY","ZIP":10022.0,"MEMBERID":2,"ADDRESS":"235 W 49st.","CITY":"New York","LASTNAME":"Greenburg"},
{"FIRSTNAME":"Arnold","STATE":"IL","ZIP":60618.0,"MEMBERID":3,"ADDRESS":"344 West Main St.","CITY":"Chicago","LASTNAME":"Mulder"},
{"FIRSTNAME":"Charlie","STATE":"CA","ZIP":90245.0,"MEMBERID":4,"ADDRESS":"272 Monticello Ave.","CITY":"San Francisco","LASTNAME":"Davidson"},
{"FIRSTNAME":"Charlie","STATE":"AZ","ZIP":85415.0,"MEMBERID":5,"ADDRESS":"49 West Cholla St.","CITY":"Phoenix","LASTNAME":"Handley"},
{"FIRSTNAME":"Chris","STATE":"IL","ZIP":60652.0,"MEMBERID":6,"ADDRESS":"45 Surf St.","CITY":"Chicago","LASTNAME":"Greenburg"},
{"FIRSTNAME":"Chris ","STATE":"CO","ZIP":51455.0,"MEMBERID":7,"ADDRESS":"2929 Braodway","CITY":"Denver","LASTNAME":"Stabler"},
{"FIRSTNAME":"Dawn","STATE":"NY","ZIP":10522.0,"MEMBERID":8,"ADDRESS":"34 Cliff St.","CITY":"Dobbs Ferry","LASTNAME":"Goldstein"},
{"FIRSTNAME":"Amy","STATE":"OD","ZIP":41544.0,"MEMBERID":9,"ADDRESS":"564 Main St.","CITY":"Toledo","LASTNAME":"Matson"},
{"FIRSTNAME":"Matt","STATE":"NY","ZIP":10236.0,"MEMBERID":10,"ADDRESS":"342 W. 73 St.","CITY":"New York","LASTNAME":"Gold"}

"RECORDCOUNT":10}

This Row based JSON object has two properties: ROWS and RECORDCOUNT.
ROWS is an array of objects. Each object represents a database row. Within each object is a list of name / value pairs. Each pair is the column name paired with the row value for that column separated by a colon. Each name / value pair is separated by commas. The JSON standard specifies double quotes around all string values, numeric and Boolean values are optional. It is important to note that some earlier libraries accepted single quotes, but this is a risky because jQuery will not read JSON objects with single quoted strings. The second property is RECORDCOUNT, this is the total number or objects in the ROWS array. RECORDCOUNT combined with start and limit pointers are used for paging grids and other ExtJS components. The row based JSON objects are larger than column based JSON objects because the column name is repeated within each row object. However row based JSON objects are more widely used across multiple client side libraries and frameworks.

{

"COLUMNS":["MEMBERID","FIRSTNAME","LASTNAME","ADDRESS","CITY","STATE","ZIP"],

"DATA":[

[1,"Steven","Benjamin","4906 N 74th St","Scottsdale","AZ",85251.0],

[2,"Arnold","Greenburg","235 W 49st.","New York","NY",10022.0],

[3,"Arnold","Mulder","344 West Main St.","Chicago","IL",60618.0],

[4,"Charlie","Davidson","272 Monticello Ave.","San Francisco","CA",90245.0],

[5,"Charlie","Handley","49 West Cholla St.","Phoenix","AZ",85415.0],

[6,"Chris","Greenburg","45 Surf St.","Chicago","IL",60652.0],

[7,"Chris ","Stabler","2929 Braodway","Denver","CO",51455.0],

[8,"Dawn","Goldstein","34 Cliff St.","Dobbs Ferry","NY",10522.0],

[9,"Amy","Matson","564 Main St.","Toledo","OD",41544.0],

[10,"Matt","Gold","342 W. 73 St.","New York","NY",10236.0]

]

}

This Column based JSON object has two properties: COLUMNS and DATA.
COLUMNS is an array of column names, separated by commas.
DATA is an array or arrays. Each array is the row data ordered by the column name array. Each item in the data row array are separated by commas. Column based JSON object are smaller and more efficient to transmit over the wire. Column based JSON object are only supported by a limited number of javascript libraries, such as spry. The ExtJS library does not support Column based JSON objects, but a custom JSON reader (cfQueryReader) may be used to add the column based JSON functionality.

ReturnFormat="JSON" (CFC) and serializedJSON() (CFM) return both column based and row based JSON objects. The returned JSON type depends on the input object. A query set is converted to COLUMN based JSON. An array or struct (including combination of nested arrays and structs ) are converted to ROW based JSON

A popular practice is to convert the query set to an array of structs and convert to ROW based JSON.

The following are two example Coldfusion Component Examples.

This example is based on Ben Nadel's QueryToStruct function (cfscript): This function accepts a query argument and returns a row based JSON struct.

This function accepts a query argument and returns a row based JSON struct. This example accepts additional arguments to set the starting row number and the number of rows to return. (used for paging grids). This example also accepts a Boolean argument: cleanStringsForJson, that call an additional function that cleans JSON string data that might corrupt the well formatted JSON object without escaping special characters.

In the video I forgot the name of the gentleman who Cutter references' his work of cfQueryReader is based on. cfQueryReader was inspired by the CFJsonReader, originally writtin by John Wilson (Daemach).
In the video: dao.cfc: Line 94 was legacy code and should have been omited.

Sencha : Sencha
Getting started with ExtJS: http://www.11001000.com/?p=23
cfQueryReader Sencha Forum Entry: click here:
cfQueryReader on RIAforge: http://cfqueryreader.riaforge.org/
Cutter's Blog: http://blog.cutterscrossing.com/

ExtJS in Action by Jay Garcia: ExtJS in Action
(I have read just about every book on the topic of ExtJS, and by a long shot, this book is the most valuable learning tool I have found to date.)
Jay Garcia has many wonderful screen cast on his blog: http://tdg-i.com/
ExtJS.tv is new but rapidly growing. http://www.extjs.tv/

Intro to ExtJS

sbenjamin — Wed, 01 Dec 2010 21:49:31 +0000

After many weeks of procrastinating, I woke up this morning with a bad cold and a damn the torpedoes attitude.
I am pleased to finally get my blog launched, but I have to confess that although I was sitting in a room alone,
I still suffer from mic fright. I have found it difficult to record tutorials with out feeling nervous, so I apologize for
the choppy presentation in advance. Additionally, The vocabulary word "method" somehow got deleted from my
memory as I was making this recording. To be concise, javascript object that can be called as constructors have
properties (what the object knows.) and methods (what the object does.). In the video I frequently refer to methods
as functions, this is not entirely incorrect, but the terminology is none the less odd.

Thank you, and enjoy!

Welcome

sbenjamin — Mon, 22 Nov 2010 02:29:23 +0000

ok200.info is a non commercial blog with the goal of sharing programming tips and tricks related to the integration of client side libraries and frameworks such as jQuery, ExtJS, YUI and other APIs. The focus is on Coldfusion, but other server side languages will be integrated in to future demos. The demonstrations will presented with an emphasis on JSON packet communication, so as long as you understand how to serialize and decode json packets within your choice of server application language, you should find this information helpful. Above all I strive to make this blog a 2 way conversation with the goal of exploring programming ideas and sharing knowledge.