Skip to main content
A
Anonymous
May 29, 2009
Question

Returning Array from CFC to JavaScript

  • May 29, 2009
  • 3 replies
  • 5063 views

I am trying to write a javascript that talks to a CFC and I need the CFC to return an Array that I can read back into the javascript (as a js array) and then loop through that list.

So in the CFC I create an array something like:

<CFFUNCTION name="getCity" access="remote" returnType="array">

     <CFSET var result = ArrayNew(2)>

     <CFSET result[0][1] = 1>

     <CFSET result[0][2] = “Vancouver”>

     <CFSET result[0][1] = 2>

     <CFSET result[0][2] = “Detroit”>

     <CFSET result[0][1] = 3>

     <CFSET result[0][2] = “Miami”>

     <CFRETURN result>

</CFFUNCTION>

Then in the JS return function:

function returnCity(returnArray) {

                for (var i=0; i<returnArray.length; i++) {

                                document.formname.cityID.options.value = returnArray[0];

                                document.formname.cityID.options.text = returnArray[1];

                }

}

    This topic has been closed for replies.

    3 replies

    ilssac
    ilssac
    Inspiring
    May 29, 2009

    The <cfwddx...> tag is built to translate complex variables back and forth particularly with javascript.

    <cfwddx action="cfml2js" input="#cfVar#" output="JSString" toplevelvariable="JSVarName">

    In your code example that might look something like this.

    CFML

    <CFFUNCTION name="getCity" access="remote" returnType="array">
         <CFSET var result = ArrayNew(2)>
         <CFSET result[0][1] = 1>
         <CFSET result[0][2] = “Vancouver”>
         <CFSET result[0][1] = 2>
         <CFSET result[0][2] = “Detroit”>
         <CFSET result[0][1] = 3>
         <CFSET result[0][2] = “Miami”>
         
         <cfwddx action="cfml2js" input="#result#" output="returnString" topLevelVariable="returnArray">

         <CFRETURN returnstring>
    </CFFUNCTION>

    JavaScript

    function returnCity(returnArray) {
                    for (var i=0; i<returnArray.length; i++) {
                                    document.formname.cityID.options.value = returnArray[0];
                                    document.formname.cityID.options.text = returnArray[1];
                    }
    }

    But I have never used this in a AJAX envornment.  In this you may have to create the wddx package in the CFML and decode this package in the JavaScript. oYou would then use the "cfml2wddx" action.  And you would have to include the JS wddx package to decode it.  The documentation explains how to do all of that.

    A
    Anonymous
    May 29, 2009

    Well, I've tried about a million things and it isn't working. Currently I've been trying to follow the example on Adobe's site here:

    http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_a-b_3.html

    Here is what I have (I am  in ColdFusion 8 Enterprise):

    Here is my current CFC:

    <CFCOMPONENT output="no">

    <!--- Return a verified member list of states/provinces --->

    <CFFUNCTION name="getStateVerMem" access="remote" returnFormat="json">

    <CFQUERY datasource="dsnname" name="getSt">

                                                    SELECT stateID, stateAB FROM States

                                    </CFQUERY>

    <CFRETURN getSt>

           

    </CFFUNCTION>

    </CFCOMPONENT>

    Here is my JS code:

    <!--- Set AJAX Proxy --->

    <CFAJAXPROXY cfc="cfc.event" jsclassname="evtreg">

    <!--- Begin JavaScript processing ---->

    <script language="javascript">

    <!--

    function returnMembership() {

                    var fieldInput = new evtreg();

                    fieldInput.setCallbackHandler(returnMemVerState);

                    fieldInput.setErrorHandler(myErrorHandler);

                    fieldInput.validateMembership();

    }

    // Update the verified member state

    function returnMemVerState(returnString) {

                    for (var i=0; i<returnString.DATA.length; i++) {

                                    document.formname.stateID.options.value = returnString.DATA[returnString.COLUMNS.findIdx(‘STATEID’)];

                                    document.formename.stateID.options.text = returnString.DATA[returnString.COLUMNS.findIdx(‘STATEAB’)];

                    }

    }

    // Error handler for the asynchronous functions.

    function myErrorHandler(statusCode, statusMsg){

                    alert('We are sorry, an error occured on this form.' + statusCode + ', ' + statusMsg);

    }

    -->

    </script>

    When the function returnMembership is called this should return data and populate the dropdown, but I keep getting an error: “DATA.length is null or not an object

    A
    Anonymous
    May 29, 2009

    If I run the CFC in a web browser I get the following output:

    {"COLUMNS":["STATEID","STATEAB"],"DATA":[[2,"AK"],[1,"AL"],[4,"AR"],[3,"AZ"],[5,"CA"],[6,"CO"],[7,"CT"],[48,"DC"],[8,"DE"],[9,"FL"],[10,"GA"],[11,"HI"],[15,"IA"],[12,"ID"],[13,"IL"],[14,"IN"],[16,"KS"],[17,"KY"],[18,"LA"],[21,"MA"],[20,"MD"],[19,"ME"],[22,"MI"],[23,"MN"],[25,"MO"],[24,"MS"],[26,"MT"],[33,"NC"],[34,"ND"],[27,"NE"],[29,"NH"],[30,"NJ"],[31,"NM"],[28,"NV"],[32,"NY"],[35,"OH"],[36,"OK"],[37,"OR"],[38,"PA"],[39,"RI"],[40,"SC"],[41,"SD"],[42,"TN"],[43,"TX"],[44,"UT"],[46,"VA"],[45,"VT"],[47,"WA"],[50,"WI"],[49,"WV"],[51,"WY"]]}

    C
    craigkaminsky
    Inspiring
    May 29, 2009

    Outside of Dan's option, you can check out an Ajax library or two (jQuery, MooTools, Prototype) for this type of functionality. These libraries greatly simplify the communication b/w JS and server-side scripts (i.e., CFML). You can use 'regular' JS to run your XMLHttpRequest (http://en.wikipedia.org/wiki/XMLHttpRequest) but it's a good bit more coding than using a JS-Ajax library. Regardless of your approach (Ajax library or standard JavaScript), the XMLHttpRequest object is the key to browser-server communication of this nature.

    Also, your JavaScript won't understand a CF array with these tools/libraries but you can use CF's SerializeJSON function to return JSON (JavaScript Object Notation) rom your CF data or just return the data as XML, either of which your JS can parse, loop over, handle as an array (sort of), etc.

    D
    Dan_Bracuk
    Inspiring
    May 29, 2009

    <cfwddx> and toScript() are two ways to get Cold Fusion Data into js.  I don't know if js can handle 2D arrays, so I always to this with 2 1D arrays.

    Here is a bit of a sample that shows using toScript() for something similar to what you are attempting.

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