[flexcoders] Converting XML Data Retrieved from Web Service to ArrayCollection

[Angelo Anolin]

Hi FlexCoders,
I am able to retrieve an XML data from a backend (ASP.NET) webservice and 
simultaneously, bind it to my datagrid.

I want to convert the XML data to an ArrayCollection and bind that Array 
Collection to the datagrid instead of the XML data.

The conversion needs to be done so that I could implement a search/filter 
functionality for my datagrid.

Here's some of the codes I have:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; 
    layout="vertical" 
    backgroundGradientColors="[#FFCC00, #993300]" 
    horizontalAlign="left" >
 <mx:Script>
  <![CDATA[
   import mx.utils.ArrayUtil;
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   import mx.rpc.soap.mxml.WebService;
   import mx.managers.CursorManager;
   import mx.managers.PopUpManager;
   import mx.utils.ObjectUtil;
   
   /**
    * @bindable 
    * @private
    * @property Will hold the data passed from the web service.
   */
   [Bindable]
   private var _xmlData:XML;
   
   [Bindable]
   private var arrDP:ArrayCollection = new ArrayCollection;
   
   private function getGridData():void
   {
    CursorManager.setBusyCursor();
    var service:WebService = new WebService();
    
    service.addEventListener(ResultEvent.RESULT, serviceResultHandler);
    service.addEventListener(FaultEvent.FAULT, serviceFaultHandler);
    service.loadWSDL("http://localhost:55841/Service1.asmx?WSDL";);
    service.RetrieveSuppliers2();
    arrDP = new ArrayCollection(mx.utils.ArrayUtil.toArray(_xmlData));
   }
   
   private function serviceResultHandler(event:ResultEvent) :void
   {
    CursorManager.removeBusyCursor();
    _xmlData = XML(event.result);
    this.MydataGrid.visible = true;
   }
   
   private function serviceFaultHandler(event:FaultEvent) :void
   {
    CursorManager.removeBusyCursor();
    Alert.show(String(event.fault), "Error");
    this.btnLoad.enabled = true;
   }
   
   private function sortNumericColumn(itemA:Object, itemB:Object): int
   {
    return ObjectUtil.numericCompare(itemA.SupplierID, itemB.SupplierID);
   }
   
   private function searchFilterGrid(e:Event) :void
   {
    e.stopImmediatePropagation()
    if(txtSearch.text == '')
    {
     arrDP.filterFunction = null;
    }
    else
    {
     arrDP.filterFunction = textFilter;
    }
   }
   
   private function textFilter(item:Object) :Boolean
   {
    return item.CompanyName.toLowerCase().indexOf(txtSearch.text.toLowerCase()) 
!= -1;
   }
  ]]>
 </mx:Script>
 
 <mx:HBox height="50"
    width="100%"
    horizontalScrollPolicy="off"
    verticalScrollPolicy="off">
  <mx:ComboBox >
   <mx:dataProvider>
    <mx:Array>
     <mx:String>All</mx:String>
     <mx:String>Supplier ID</mx:String>
     <mx:String>Company Name</mx:String>
     <mx:String>Contact Name</mx:String>
     <mx:String>Contact Title</mx:String>
     <mx:String>Address</mx:String>
    </mx:Array>
   </mx:dataProvider> 
  </mx:ComboBox>
  <mx:TextInput id="txtSearch" width="200" change="searchFilterGrid(event)" />
  <mx:CheckBox label="Filter" />
  <mx:Label id="lblRecordCount" />
 </mx:HBox>
 
 <mx:VBox horizontalCenter="0" 
    verticalCenter="0" 
    horizontalScrollPolicy="off"
    verticalScrollPolicy="off"
    height="100%"
    width="100%" >
  <mx:HBox width="70%" height="100%" borderStyle="solid">
   <mx:DataGrid id="MydataGrid" 
       creationComplete="getGridData();" 
       horizontalScrollPolicy="on" 
       width="100%" 
       height="100%" 
       visible="false" 
       dataProvider="{_xmlData.*}" 
       itemClick="getDataItems();" >
    <mx:columns>
     <mx:DataGridColumn headerText="ID" dataField="SupplierID" 
sortCompareFunction="sortNumericColumn" width="30"/>
     <mx:DataGridColumn headerText="Company Name" dataField="CompanyName" 
width="200"/>
     <mx:DataGridColumn headerText="Contact Name" dataField="ContactName"  
width="150"/>
     <mx:DataGridColumn headerText="Contact Title" dataField="ContactTitle" 
width="150"/>
     <mx:DataGridColumn headerText="Address" dataField="Address" width="250"/>
    </mx:columns>
   </mx:DataGrid>
  </mx:HBox>
 </mx:VBox>
</mx:Application>

When I replace the dataProvider for the datagrid with this:

dataProvider="{arrDP}"

No data is shown on the datagrid.  How can I then convert the XML to array 
collection and subsequently, be able to bind it to my datagrid?

I would appreciate your advice on this matter.

Thanks and regards,

Angelo