Converting an array of String objects to an array of Object objects in Flex
Problem
You want to convert an array of strings to an array of objects so you can use the array as a data provider.
Solution
The following example shows how you can convert an array of String objects (with duplicate entries) to an array of Object objects using a simple loop and the Array.map() method, so the Object array can be used as a data provider in a List based control.
Detailed explanation
The following example shows how you can convert an array of strings to an array of objects so it can be used as a data provider in Flex.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/26/converting-an-array-of-string-objects-to-an-array-of-object-objects-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private var arrayOfString:Array;
private var arrayOfObject:Array;
private function init():void {
arrayOfString = ["test", "test", "fork", "test"];
arrayOfObject = stringArrayToObjectArray(arrayOfString);
}
private function stringArrayToObjectArray(sourceArray:Array, key:String = "label"):Array {
var returnArray:Array = new Array();
var idx:uint;
var len:uint = sourceArray.length;
for (idx=0; idx<len; idx++) {
var obj:Object = {};
obj[key] = sourceArray[idx];
returnArray.push(obj);
}
return returnArray;
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Button label="Array of String"
click="list.dataProvider = arrayOfString;" />
<mx:Button label="Array of Object"
click="list.dataProvider = arrayOfObject;" />
</mx:ApplicationControlBar>
<mx:List id="list"
width="100"
rowCount="6"
initialize="init();" />
</mx:Application>
Another approach (suggested on my blog by a reader, Chetan) is to use the Array.map() method, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/26/converting-an-array-of-string-objects-to-an-array-of-object-objects-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private var arrayOfString:Array;
private var arrayOfObject:Array;
private function init():void {
arrayOfString = ["test", "test", "fork", "test"];
arrayOfObject = arrayOfString.map(toObject);
}
private function toObject(element:String, index:int, arr:Array):Object {
return {label: element};
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Button label="Array of String"
click="list.dataProvider = arrayOfString;" />
<mx:Button label="Array of Object"
click="list.dataProvider = arrayOfObject;" />
</mx:ApplicationControlBar>
<mx:List id="list"
width="100"
rowCount="6"
initialize="init();" />
</mx:Application>
For those of you unfamiliar with the Array class’s map() method, it is one of the many new Array methods in ActionScript 3.0. Other new methods include: every(), filter(), forEach(), map(), and some(). For more information, check out the Flex 3 documentation’s Array class in the Flex 3 Language Reference.
For more inforamation, see "Converting an array of String objects to an array of Object objects in Flex" on flexexamples.com.
