Convert Selected Data from List Component to String (AS3)

Introduction

The following post will describe how to convert data selected from a List component in Flash (AS3) to a String.

After Googling and finding no solution, I decided to create develop my own solution to the problem. There is not a straight-forward way to get the selected data from a List component converted to a String. You’d think there would be a simple function in AS3 that could accomplish this task. If there is such a function, I have been unable to find it in the ActionScript 3.0 Language and Components Reference.

Code Snippet

submitBut.addEventListener(MouseEvent.CLICK, submitHandler);

function submitHandler(e:MouseEvent) {
	var myArr:Array = toppingList.selectedIndices;

	var selectedToppings:String = "";

	for(var i:int = 0; i < myArr.length; i++) {
		var j:int = myArr[i];
		if(selectedToppings == "") {
			selectedToppings = toppingList.getItemAt(j).data;
		} else {
			selectedToppings += ", " + toppingList.getItemAt(j).data;
		}
	}

	trace("Selected toppings: " + selectedToppings);
}

Code Explanation

Let’s assume we have a List component on the stage and given this component an Instance Name of toppingList. Under the Component Inspector tab, we have set the allowMultipleSelection value to true and entered five pizza toppings into the dataProvider field (Pepperoni, Sausage, Mushrooms, Canadian Bacon, and Cheese) . There is also a submit button (labeled submitBut) that will call a listener function to convert the selected items in the List component to a String when clicked.

Once the selections have been made in the List and the submit button is clicked, the event listener for submitBut is called and the following occurs:

1. An array is created to hold the selected indices from the toppingList component.

   var myArr:Array = toppingList.selectedIndices;

   If you were to do a trace of the toppingList.selectedIndices, you would see an array that contains the objects for the items that were selected from the multiple-selection list ¹. This array of objects is a List of SimpleCollectionItems. For example, if Pepperoni and Sausage were selected and toppingList.selectedIndices was traced, you would see the following:

   [SimpleCollectionItem: Pepperoni,pepperoni],[SimpleCollectionItem: Sausage,sausage]

2. An empty String is created to house the selected items for the List component.

   var selectedToppings:String = "";

3. A for loop is used to loop through the array of selected items from the toppingList component.

   for(var i:int = 0; i < myArr.length; i++) {

4. An integer is createdvariable to hold the current index value of myArr (which is also the index for a selected item in toppingList)

   var j:int = myArr[i];

5. The data property of the current SimpleCollectionItem from toppingList.selectedIndices is concatenated to the selectedToppings String.

   if(selectedToppings == "") {
    selectedToppings = toppingList.getItemAt(j).data;
   } else {
    selectedToppings += ", " + toppingList.getItemAt(j).data;
   }

A trace of the selectedToppings String will show a properly comma separated string that can be used in many situations.
Note: If you want to get the label of the selected items, simply use
toppingList.getItemAt(j).label

Download Example

The example file can be downloaded here.

I welcome comments or suggestions on optimizing this code snippet. If you are aware of an easier method, please kindly point me to that example.