Collection Types

Here are the supported collection type values.

type	Example	Description
type[] (Array)	`<aura:attribute name="colorPalette" type="String[]" default="['red', 'green', 'blue']" />`	An array of items of a defined type.
`List`	`<aura:attribute name="colorPalette" type="List" default="['red', 'green', 'blue']" />`	An ordered collection of items.
`Map`	`<aura:attribute name="sectionLabels" type="Map" default="{ a: 'label1', b: 'label2' }" />`	A collection that maps keys to values. A map can’t contain duplicate keys. Each key can map to at most one value. Use plain objects to represent Aura Maps in JavaScript. If you want to set map values in JavaScript, use `object[key] = value`. An attribute with no default value defaults to `null` in JavaScript. Use `default="{}"` in markup for an empty map.
`Set`	`<aura:attribute name="collection" type="Set" default="['red', 'green', 'blue']" />`	A collection that contains no duplicate elements. The order for set items is not guaranteed. For example, `"['red', 'green', 'blue']"` might be returned as `blue,green,red`.

Note: To set a default value for Array, List, or Set types, surround comma-separated values with []; for example default="['red', 'green', 'blue']". Setting a default value without square brackets is deprecated and can lead to unexpected behavior.

Important: Don’t use JavaScript Maps (the Map object) for Map Aura types. Use plain JavaScript objects instead.

Checking for Types

To determine a variable type, use typeof or a standard JavaScript method, such as Array.isArray(), instead. The instanceof operator is unreliable due to the potential presence of multiple windows or frames.

Setting List Items

There are several ways to set items in a list. To use a client-side controller, create an attribute of type List and set the items using component.set().

This example retrieves a list of numbers from a client-side controller when a button is clicked.

1<aura:attribute name="numbers" type="List"/>
2<lightning:button onclick="{!c.getNumbers}" label="Display Numbers" />
3<aura:iteration var="num" items="{!v.numbers}">
4  {!num.value}
5</aura:iteration>

1/** Client-side Controller **/
2({
3  getNumbers: function(component, event, helper) {
4    var numbers = [];
5    for (var i = 0; i < 20; i++) {
6      numbers.push({
7        value: i
8      });
9    }
10    component.set("v.numbers", numbers); 
11    }
12})

Working with Map Items

To add a key and value pair to a map, use the syntax myMap['myNewKey'] = myNewValue.

1var myMap = cmp.get("v.sectionLabels");
2myMap['c'] = 'label3';

To retrieve a value, use cmp.get("v.sectionLabels")['a'].

Here’s a controller with a function that adds a value, retrieves a value, and iterates over a map.

1({
2    addToMap : function(cmp, event, helper) {
3        var myMap = cmp.get("v.sectionLabels");
4        myMap['c'] = 'label3';
5        console.log("myMap: " + JSON.stringify(myMap));
6        
7        // get map entry
8        var entryA = myMap['a'];
9        console.log("entryA: " + entryA);
10        
11        // iterate map
12        for (var key in myMap){
13            console.log("key: " + key + ", value: " + myMap[key]);
14        }
15    }
16})

See Also

Passing Data to an Apex Controller