Lightning Aura Components Developer Guide
jCollection 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. An attribute with no default value defaults to null in JavaScript. If you want to set map values 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. |
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})