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.

View MXML

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

View MXML

<?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>
 
Tagged with:
 
About The Author

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.

9 Responses to Displaying specific items from an ArrayCollection in Flex

  1. Jon Henley says:

    Hey

    How would I use a string variable instead of the ‘label’ … if that is dynamic?

    is it possible with getItemAt?

  2. peterd says:

    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

  3. Bobby says:

    Ok. I am trying to send a string to a wsdl from an arrayCollection with all values. any thoughts?

  4. larry says:

    hi!

    How about to random the value of array collection by clicking a button.

    thank you!

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

  6. oleksiy says:

    and what should be done to get specific data from http repsonce that looks like that:

    result	Array (@3c7e741)
    	[0]	com.FE.Usersettings (@3da3101)
    		[inherited]
    			ActiveRecordUID	"23ACC18E-4C2D-80E8-222C-000062E36FCA"
    			ShowID	"true"
    	length	1
    

    How can I access to ShowID value?
    result.ShowID doesn’t work.
    thank you in advance

  7. oleksiy says:

    answering my own question after last try with debugger :)
    correct answer is result[0].ShowID

  8. zhanghongxia says:

    Can you give an example of full application?

  9. edward says:

    Is it possible to use arraycollection to display line series in flex line graph?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree