Macromedia Flex Macromedia Flex
Iterating over a ColdFusion Query in Flex
  Home

Jun 12, 2008 - Iterating over a ColdFusion Query in Flex
Instead of using Binding - you want to access each element individually

Question: Using a RemoteObject to a CFC that returns a Query, they come back to as a collection of Objects. This makes it easy to then display in a DataGrid or ComboBox through data binding. But how do I access each of the elements of each Object?

Solution: Just like in ColdFusion, you can loop over an ArrayCollection just like you can loop over a Query. E.g:

   1: <cfloop from="1" to="#myQuery.RecordCount#" index="i">
   2:  The UserID is #myQuery.UserID[i]#
   3: </cfloop>

In Flex you'd employ the same technique of looping over the number of items in the ArrayCollection, and doing whatever you want with each element. Here's a working example:

net/cflex/sample.cfc

   1: <cfcomponent>
   2:     <cffunction name="getQuery" access="remote" returntype="query" hint="Generates dummy query data">
   3:         <cfset var myQuery = QueryNew("UserID,userName,Name,dtCreated","Integer,VarChar,VarChar,Date")>
   4:     <cfscript>
   5:             QueryAddRow(myQuery);
   6:             QuerySetCell(myQuery,"UserID",1);            
   7:             QuerySetCell(myQuery,"userName","tahmed");
   8:             QuerySetCell(myQuery,"Name","Tariq Ahmed");            
   9:             QuerySetCell(myQuery,"dtCreated","06/01/2008 18:54:22");
  10:             QueryAddRow(myQuery);
  11:             QuerySetCell(myQuery,"UserID",2);            
  12:             QuerySetCell(myQuery,"userName","cgriefer");
  13:             QuerySetCell(myQuery,"Name","Charlie Griefer");            
  14:             QuerySetCell(myQuery,"dtCreated","05/10/2008 02:22:45");            
  15:         </cfscript>
  16:         <cfreturn myQuery>
  17:     </cffunction>
  18: </cfcomponent>

Test.mxml

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="mySrv.getQuery()">
   3:     <mx:Script>
   4:         <![CDATA[
   5:         import mx.collections.ArrayCollection;
   6:         import mx.rpc.events.FaultEvent;        
   7:         import mx.rpc.events.ResultEvent;
   8:         import mx.controls.Alert;
   9:         
  10:      [Bindable]
  11:      public var acData:ArrayCollection = new ArrayCollection();            
  12:      [Bindable]
  13:      public var stData:String = new String();
  14:     
  15:         public function handleResult(event:ResultEvent):void
  16:         {    
  17:             acData = ArrayCollection(event.result);
  18:             for(var i:int = 0; i< acData.length; i++)
  19:             {
  20:                 stData = stData + 'UserID=' + acData[i].UserID;
  21:                 stData = stData + ', Username=' + acData[i].userName;    
  22:                 stData = stData + ', Name=' + acData[i].Name;
  23:                 stData = stData + ', Created=' + acData[i].dtCreated;
  24:                 stData = stData + '\n';                                                                    
  25:             }
  26:         }
  27:          
  28:         public function handleFault(event:FaultEvent):void
  29:         {
  30:             Alert.show(event.fault.faultDetail);
  31:         }                          
  32:         ]]>
  33:     </mx:Script>
  34:     <mx:RemoteObject id="mySrv" destination="ColdFusion" source="net.cflex.sample" showBusyCursor="true">
  35:         <mx:method name="getQuery" result="handleResult(event)" fault="handleFault(event)"/>
  36:     </mx:RemoteObject>     
  37:     
  38:     <mx:Panel title="Iterating over a ColdFusion Query in Flex Example" width="100%" height="350">
  39:     <mx:Label text="Data Dump" fontSize="16" fontWeight="bold"/>
  40:     <mx:DataGrid dataProvider="{acData}" width="100%" height="100">
  41:         <mx:columns>
  42:         <mx:Array>
  43:             <mx:DataGridColumn headerText="UserID" dataField="UserID"/>    
  44:             <mx:DataGridColumn headerText="Username" dataField="userName"/>
  45:             <mx:DataGridColumn headerText="Name" dataField="Name"/>
  46:             <mx:DataGridColumn headerText="Created" dataField="dtCreated"/>                                                                   
  47:         </mx:Array>
  48:         </mx:columns>
  49:     </mx:DataGrid>
  50:     <mx:Label text="Iteration Version" fontSize="16" fontWeight="bold"/>
  51:     <mx:TextArea width="100%" text="{stData}" height="100"/>        
  52:     </mx:Panel>    
  53: </mx:Application>

File Details
Created On Jun, 12, 2008 by Tariq Ahmed
Last Modified On Jun, 12, 2008 by Tariq Ahmed
Group: Tips and Articles
Flex Versions: All
Category: Data Services:Remote Objects
Type: Tip
Difficulty: Beginner
Keywords: