コレクション型 | Lightning コンポーネント開発者ガイド

次に、サポートされているコレクション型の値を示します。

型	例	説明
`List`	`<aura:attribute name="colorPalette" type="List" default="red,green,blue" />`	順序付けされた項目のコレクション。
`Map`	`<aura:attribute name="sectionLabels" type="Map" default="{ a: 'label1', b: 'label2' }" />`	キーを値に対応付けるコレクション。対応付けに重複キーを含めることはできません。各キーを複数の値に対応付けることはできません。デフォルトは空のオブジェクト `{}` です。値を取得するには、`cmp.get("v.sectionLabels")['a']` を使用します。
`Set`	`<aura:attribute name="collection" type="Set" default="1,2,3" />`	重複する要素を含まないコレクション。セット項目の順序は保証されません。たとえば、`"1,2,3"` が `"3,2,1"` と返される可能性があります。

リスト項目の設定

リスト内の項目を設定するには、いくつかの方法があります。クライアント側のコントローラを使用するには、List 型の属性を作成し、component.set() を使用して項目を設定します。

次の例では、ボタンをクリックしたときにクライアント側のコントローラから数値のリストを取得します。

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

リストデータをコントローラから取得するには、aura:iteration を使用します。

対応付け項目の設定

キーと値のペアを対応付けに追加するには、構文 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';

次の例では、対応付けからデータを取得します。

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