Converting an array of String objects to an array of Object objects in Flex

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.

Full code after the jump.

View MXML

<?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>

View source is enabled in the following example.

A reader, Chetan, commented and suggested another (and admittedly much better) approach, using the Array.map() method.

<?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.

Tagged as: dataProvider