Skip to main content
A
Anonymous
September 9, 2011
Answered

Returning JSON to CF/jQuery

  • September 9, 2011
  • 1 reply
  • 2371 views

CF page:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {              
     $.getJSON('loaddata.cfm',function(data){
     $("#div1").html(data);
     });
});
</script>
</head>
<body>

<div id="div1" style="background-color:tan; height:70px; width:450px;"></div>

</body>
</html>

loaddata.cfm

<cfquery datasource="pubs" name="jquerytest">
     Select * from jquery
</cfquery>

<cfoutput>#serializejson(jquerytest)#</cfoutput>

loaddata.cfm is displaying {"COLUMNS":["ID","TITLE","CONTENT"],"DATA":[[1,"Dave","test content 1"],[2,"Bob","test content 2"],[3,"Jesse","test content 3"]]}

I'm having an issue returning this CF query in JSON format. It's available but I'm not sure what format/structure jQuery expects, what I have isn't outputting any data. My

$("#div1").html(data);

isn't displaying any data.

This topic has been closed for replies.
Correct answer JR__Bob__Dobbs

Bear in mind that jQuery doesn't expect a particular format, you have the ability to retreive any JSON object and do something with it.  That being said most JSON services return a collection of key/value pairs, a serialized CFQUERY resultset is a little different.  A query object contains a COLUMNS and DATA property.  In the case of the DATA property each item is an array with one item per field. The COLUMNS property contains an array of column names.

You should also set the HTTP header of the loaddata.cfm page to identify the contents as JSON, you can add the following just before the CFOUTPUT tag on that page:

<cfcontent type="application/json" reset="yes">

Here is a quick sample of JavaScript to get you started, you should be able to copy and paste this to replace the JS block in the sample you posted.

<script type="text/javascript">
$(document).ready(function(e) {             
     $.getJSON('loaddata.cfm',function(data){
               
        //build HTML text to be displayed
        var txt = "<ul>";
       
        //the DATA property will contain one array for each row in your result set
        for(var i = 0; i < data.DATA.length; i++)
        {
            txt = txt + "<li>" + data.DATA[1] + "</li>";  //add the second item in the array, to the string to be output
        }      

        txt = txt + "</ul>";
       
        $("#div1").append(txt);  //add the new HTML block to the DOM. 
     });
});
</script>

I recommend that you take a look at:

Ray Camden's blog, which contains many jQuery related articles:

http://www.coldfusionjedi.com/index.cfm/2007/9/20/Quick-and-Dirty-JSONQuery-Example

The tutorials section of the jQuery site:

http://docs.jquery.com/Tutorials

1 reply

J
JR__Bob__DobbsCorrect answer
Inspiring
September 12, 2011

Bear in mind that jQuery doesn't expect a particular format, you have the ability to retreive any JSON object and do something with it.  That being said most JSON services return a collection of key/value pairs, a serialized CFQUERY resultset is a little different.  A query object contains a COLUMNS and DATA property.  In the case of the DATA property each item is an array with one item per field. The COLUMNS property contains an array of column names.

You should also set the HTTP header of the loaddata.cfm page to identify the contents as JSON, you can add the following just before the CFOUTPUT tag on that page:

<cfcontent type="application/json" reset="yes">

Here is a quick sample of JavaScript to get you started, you should be able to copy and paste this to replace the JS block in the sample you posted.

<script type="text/javascript">
$(document).ready(function(e) {             
     $.getJSON('loaddata.cfm',function(data){
               
        //build HTML text to be displayed
        var txt = "<ul>";
       
        //the DATA property will contain one array for each row in your result set
        for(var i = 0; i < data.DATA.length; i++)
        {
            txt = txt + "<li>" + data.DATA[1] + "</li>";  //add the second item in the array, to the string to be output
        }      

        txt = txt + "</ul>";
       
        $("#div1").append(txt);  //add the new HTML block to the DOM. 
     });
});
</script>

I recommend that you take a look at:

Ray Camden's blog, which contains many jQuery related articles:

http://www.coldfusionjedi.com/index.cfm/2007/9/20/Quick-and-Dirty-JSONQuery-Example

The tutorials section of the jQuery site:

http://docs.jquery.com/Tutorials

A
Anonymous
September 12, 2011

That's a great help Bob, I appreciate you taking the time to write that. This sent the data correctly, so I'm able to move forward.

I did take a look at those links before you had sent them, they pop up pretty high when searching on CF and jQuery. I just found another tutorial I thought was better. I'll take a deeper look. Thanks again.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices