Flex Examples
Removing duplicate items from an array using the Array.filter() method
I’m sure there is an easier/better way to do this (and I’ll update this post accordingly if I find one) but here is a little sample which takes an array of items and filters out the duplicates.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/05/removing-duplicate-items-from-an-array-using-the-arrayfilter-method/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init()">
<mx:Script>
<![CDATA[
private var keys:Object = {};
/**
* Called by the Application container's creationComplete
* event handler. This method creates a new Array object
* which will be used as a data provider as well as a
* filtered view of that array which does not contain
* duplicated items.
*/
private function init():void {
/* Create a dummy data source with some semi-random
data. */
var arr:Array = [];
arr.push({data:1, label:"one"});
arr.push({data:1, label:"one"});
arr.push({data:1, label:"one"});
arr.push({data:1, label:"one"});
arr.push({data:2, label:"two"});
arr.push({data:2, label:"two"});
arr.push({data:2, label:"two"});
arr.push({data:1, label:"one"});
arr.push({data:3, label:"three"});
arr.push({data:3, label:"three"});
/* Filter the original array and call the
removeDuplicates() function on each item
in the array. */
var filteredArr:Array = arr.filter(removedDuplicates);
arrColl.source = arr;
dedupedArrColl.source = filteredArr;
}
/**
* This method is used to filter an array so that no
* duplicate items are created. It works by first
* checking to see if a keys object already contains
* a key equal to the current value of the item.data
* value. If the key already exists, the current item
* will not be readded to the data provider. If the key
* does not already exist, add the key to the keys
* object and add this item to the data provider.
*/
private function removedDuplicates(item:Object, idx:uint, arr:Array):Boolean {
if (keys.hasOwnProperty(item.data)) {
/* If the keys Object already has this property,
return false and discard this item. */
return false;
} else {
/* Else the keys Object does *NOT* already have
this key, so add this item to the new data
provider. */
keys[item.data] = item;
return true;
}
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl" />
<mx:ArrayCollection id="dedupedArrColl" />
<mx:HBox>
<mx:VBox>
<mx:Label text="Original ({arrColl.length} items):" />
<mx:List dataProvider="{arrColl}" />
</mx:VBox>
<mx:VBox>
<mx:Label text="Filtered ({dedupedArrColl.length} items):" />
<mx:List dataProvider="{dedupedArrColl}" />
</mx:VBox>
</mx:HBox>
</mx:Application>
View source is enabled in the following example.
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.
-
Add Widgets (Content Sidebar)
This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.
10 Responses to Removing duplicate items from an array using the Array.filter() method
-
Categories
- Accordion
- AccordionHeader
- ActionScript
- AddChild
- AdvancedDataGrid
- Alert
- alpha
- Animate
- AnimateProperties
- Application
- Application (Spark)
- ArrayCollection
- BarChart
- baseColor
- beta
- beta1
- beta2
- Bitmap
- Bitmap/BitmapData
- BitmapData
- BitmapFill
- BitmapFill (Spark)
- BitmapGraphic
- BitmapImage
- BitmapImage (Spark)
- BitmapImageResizeMode
- Border (Spark)
- BorderContainer (Spark)
- Box
- BuildInfo
- Button
- Button (Spark)
- ButtonBar
- ButtonBar (Spark)
- ByteArray
- Camera
- Charting
- CheckBox
- CheckBox (Spark)
- ClassFactory
- CollectionEvent
- Color
- ColorPicker
- ColorUtil
- ComboBox
- ComboBoxArrowSkin
- Compiler
- Component
- Component (Spark)
- Configuration
- Container
- ContextMenu
- ContextMenuEvent
- ContextMenuItem
- CSSCondition
- CSSSelector
- CSSStyleDeclaration
- CurrencyFormatter
- CursorManager
- Data Binding
- DataGrid
- DataGrid (Spark)
- DataGridColumn
- Date
- DateBase
- DateChooser
- DateField
- DateFormatter
- Debugging
- DefaultComplexItemRenderer
- DefaultTileListEffect
- DropDownList
- DropDownList (Spark)
- DropDownListButtonSkin
- DropDownListSkin
- DropShadowFilter
- E4X
- Effects
- Ellipse
- EmailValidator
- Embed
- Event
- Fade
- FileFilter
- FileReference
- fill
- Filters
- Flash
- Flash Integration
- FlashVars
- Flex 3 SDK
- Flex Builder
- Flex Builder 3
- Flex SDK
- Flex4
- FLVPlayback
- FocusManager
- FontLookup
- Fonts
- Form
- Form (Spark)
- FormHeading (Spark)
- FormItem
- FormItem (Spark)
- Forms
- FTETextField (Spark)
- FullScreen
- FullScreenEvent
- FxAnimateColor
- FxButtonBar
- FxCheckBox
- FXG
- FxHScrollBar
- FxHSlider
- FxList
- FxNumericStepper
- FxRadioButton
- FxRotate3D
- FxScroller
- FxTextArea
- FxTextInput
- FxToggleButton
- FxVScrollBar
- FxVSlider
- getStyleDeclaration()
- GradientEntry
- Graphic (Spark)
- HBox
- HDividedBox
- HGroup (Spark)
- HorizontalLayout
- HorizontalList
- HSBColor (Spark)
- HScrollBar (Spark)
- HSlider
- HSlider (Spark)
- HTML template
- ID3Info
- Image
- Image (Spark)
- ImageSnapshot
- itemRenderer
- JointStyle
- Label
- Label (Spark)
- Legend
- LegendItem
- LigatureLevel
- Line
- LinearGradientStroke
- LineScaleMode
- LinkBar
- LinkButton
- List
- List (Spark)
- Menu
- MenuBar
- Metadata
- MetadataEvent
- Model
- Mouse
- MouseCursor
- MouseEvent
- Move
- Namespace
- NavigatorContent (Spark)
- needsSWF
- NetConnection
- NetStream
- Nightly Builds
- NumberBaseRoundType
- NumberFormatter
- NumberValidator
- NumericCompare
- NumericStepper
- NumericStepper (Spark)
- ObjectProxy
- ObjectUtil
- paddingLeft
- paddingRight
- Panel
- Panel (Spark)
- Parallel
- Path
- PieChart
- PieSeries
- PieSeriesItem
- PopUpAnchor (Spark)
- PopUpButton
- PopUpManager
- ProgrammaticSkin
- ProgressBar
- PropertyChangeEvent
- QName
- RadialGradient
- RadioButton
- RadioButton (Spark)
- RadioButtonGroup
- RadioButtonGroup (Spark)
- Rect
- RegExp
- Regular Expressions
- Repeater
- RichEditableText
- RichText
- RichText (Spark)
- RichTextEditor
- Rotate
- Rotate3D (Spark)
- Scroller (Spark)
- Sequence
- setStyle()
- SimpleText
- SimpleText (Spark)
- skinClass
- Slider
- SliderEvent
- SolidColor
- SolidColorStroke
- Sort
- SortField
- Sound
- SoundEffect
- Spinner (Spark)
- SpriteVisualElement (Spark)
- StageDisplayState
- States
- StringUtil
- StringValidator
- StyleManager
- Styles
- SWFLoader
- SWFObject
- System
- SystemManager
- TabBar
- TabBar (Spark)
- TabNavigator
- TabStopFormat
- Text
- Text Layout Framework (TLF)
- TextArea
- TextArea (Spark)
- TextBox
- TextConverter
- TextEvent
- TextFlow
- TextFlowUtil
- TextFormat
- TextGraphic
- TextInput
- TextInput (Spark)
- TextLayoutFormat
- TextView
- Themes
- TileLayout
- TileList
- TileOrientation
- Timer
- TitleWindow
- TitleWindow (Spark)
- TLF
- ToggleButton (Spark)
- ToggleButtonBar
- ToolTip
- Transition
- Tree
- TruncationOptions
- UIComponent
- UIFTETextField
- Updater
- URLLoader
- URLRequest
- URLUtil
- URLVariables
- ValidationResultEvent
- Validator
- Validators
- VBox
- VDividedBox
- Vector
- VerticalLayout
- VerticalLayout (Spark)
- VGroup (Spark)
- Video
- VideoDisplay
- VideoElement
- VideoElement (Spark)
- VideoEvent
- VideoPlayer (Spark)
- VideoPlayerScrubBar
- ViewStack
- VScrollBar (Spark)
- VSlider
- VSlider (Spark)
- XML
- XMLList
- XMLListCollection
- ZipCodeValidator
- ZipCodeValidatorDomainType
- Zoom
-
Articles
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
-
Meta


Tank’you very much, this is the right example for me.
Nice example! Can this be done with an ArrayCollection as well?
Bob,
I believe it can.
Try something like this:
And then change the filtering function to this:
/** Note that the method has 1 parameter now instead of 3, the rest of the code can remain the same */ private function removedDuplicates(item:Object):Boolean { // ... }Thanks, man! That’s what I needed here. Awesome!
Bob,
let’s say you have an ArrayCollection AC with Strings S.
To make sure that each String is represented only once:
S=”Bob”;
if ( !AC.contains(S)) AC.addItem(S);
If you wanna use the filter function twice, you might wanna clear the keys object since it already has old values for second use.
Snippet:
keys={};
var filterRoutes:Array = routesArray.filter(removedDuplicates);
keys={};
var filterDivisions:Array = divisionsArray.filter(removedDuplicates);
when I use above filter function for ArrayCollection along with Datagrid, upon click of sort functionality, datagrid is becoming empty.
how to resolve this issue?
Nice example !!! Thanks !!!
@Priya: Use .refresh();
if I have 2 datagrids using the same array bindable. and I want the filter to be applied to only one of the datagrids. how?
Very nice example! Thank you very much!