Flex Examples
The following examples show how you can display specific items in a Flex ArrayCollection using the getItemAt() method and the array access operator ([]).
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/10/displaying-specific-items-from-an-arraycollection-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="Student A" score="85" />
<mx:Object label="Student B" score="48" />
<mx:Object label="Student C" score="71" />
<mx:Object label="Student D" score="88" />
<mx:Object label="Student E" score="24" />
<mx:Object label="Student F" score="64" />
<mx:Object label="Student G" score="76" />
<mx:Object label="Student H" score="76" />
<mx:Object label="Student I" score="93" />
<mx:Object label="Student J" score="88" />
<mx:Object label="Student K" score="48" />
<mx:Object label="Student L" score="76" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:ApplicationControlBar dock="true">
<mx:HSlider id="slider"
minimum="0"
maximum="{arrColl.length-1}"
liveDragging="true"
snapInterval="1"
tickInterval="1"
dataTipPlacement="right" />
</mx:ApplicationControlBar>
<mx:Label text="{arrColl.getItemAt(slider.value).label}" />
</mx:Application>
View source is enabled in the following example.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/10/displaying-specific-items-from-an-arraycollection-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="Student A" score="85" />
<mx:Object label="Student B" score="48" />
<mx:Object label="Student C" score="71" />
<mx:Object label="Student D" score="88" />
<mx:Object label="Student E" score="24" />
<mx:Object label="Student F" score="64" />
<mx:Object label="Student G" score="76" />
<mx:Object label="Student H" score="76" />
<mx:Object label="Student I" score="93" />
<mx:Object label="Student J" score="88" />
<mx:Object label="Student K" score="48" />
<mx:Object label="Student L" score="76" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:ApplicationControlBar dock="true">
<mx:HSlider id="slider"
minimum="0"
maximum="{arrColl.length-1}"
liveDragging="true"
snapInterval="1"
tickInterval="1"
dataTipPlacement="right"
change="lbl.text = arrColl[event.value].label;" />
</mx:ApplicationControlBar>
<mx:Label id="lbl" />
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Hey
How would I use a string variable instead of the ‘label’ … if that is dynamic?
is it possible with getItemAt?
Jon Henley,
You can try using the Array access syntax to specify the field name. Something like the following:
<mx:String id="str">score</mx:String> <mx:Label text="{arrColl.getItemAt(slider.value)[str]}" />Flex Builder may give you a warning saying “Data binding will not be able to detect changes when using square bracket operator. For Array, please use ArrayCollection.getItemAt() instead.”, but you can probably ignore that.
Peter
Ok. I am trying to send a string to a wsdl from an arrayCollection with all values. any thoughts?
hi!
How about to random the value of array collection by clicking a button.
thank you!
How you can modify on your example a specific item, for example for student F change the value of the score 64 by 30 on action scriptt?… In advance thanks and grettings from mexico :D
and what should be done to get specific data from http repsonce that looks like that:
How can I access to ShowID value?
result.ShowIDdoesn’t work.thank you in advance
answering my own question after last try with debugger :)
correct answer is
result[0].ShowIDCan you give an example of full application?
Is it possible to use arraycollection to display line series in flex line graph?