Collection Types | Lightning Components Developer’s Guide

Here are the supported collection type values.

type	Example	Description
`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. Defaults to an empty object, `{}`. Retrieve values by using `cmp.get("v.sectionLabels")['a']`.
`Set`	`<aura:attribute name="collection" type="Set" default="1,2,3" />`	A collection that contains no duplicate elements. The order for set items is not guaranteed. For example, `"1,2,3"` might be returned as `"3,2,1"`.

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.

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:attribute name="numbers" type="List"/>
18<ui:button press="{!c.getNumbers}" label="Display Numbers" />
19<aura:iteration var="num" items="{!v.numbers}">
20  {!num.value}
21</aura:iteration>
22

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/** Client-side Controller **/
18({
19  getNumbers: function(component, event, helper) {
20    var numbers = [];
21    for (var i = 0; i < 20; i++) {
22      numbers.push({
23        value: i
24      });
25    }
26    component.set("v.numbers", numbers); 
27    }
28})
29

To retrieve list data from a controller, use aura:iteration.

Setting Map Items

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

1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 var myMap = cmp.get("v.sectionLabels");
18 myMap['c'] = 'label3';

The following example retrieves data from a map.

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17for (key in myMap){
18     //do something
19}
20