aura:iteration
In this blog, I am going to show how to use the aura:iteration to renders a view of a collection of items. aura:iteration iterates over a collection of items and renders the body of the tag for each item. The Below are the different examples to show how you can use iteration.
Simple iteration
In this example, we are iterating over the array of String.
|
1 2 3 4 5 6 7 8 |
<aura:component> <aura:attribute name="items" type="String[]" default="['red','green','blue']"/> <aura:iteration items="{!v.items}" var="item"> <ul> <li>{!item}</li> </ul> </aura:iteration> </aura:component> |
Nested Iteration
The following code nested iteration
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<aura:component> <aura:attribute name="items" type="String[]" default="['color','color','color']"/> <aura:attribute name="innerData" type="String[]" default="['red','green','blue']"/> <ul> <aura:iteration items="{!v.items}" var="outer" indexVar="index"> <li>{!outer}</li> <ul> <aura:iteration items="{!v.innerData}" var="inner" indexVar="index"> <li> {!inner}</li> </aura:iteration> </ul> </aura:iteration> </ul> </aura:component> |
Object iteration
The following example shows iteration over the Javascript object
|
1 2 3 4 5 6 7 |
<aura:component> <aura:handler name="init" value="{!this}" action="{!c.init}"/> <aura:attribute name="data" type="Object"/> <aura:iteration items="{!v.data}" var="item"> {!item.fieldName} -- {!item.newValue} <br/> </aura:iteration> </aura:component> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
({ init: function (cmp) { var changes = [ { "fieldName": "Name", "newValue": "Burlington Co of America", "oldValue": "Burlington Corp of America" }, { "fieldName": "Revenue", "newValue": "$500,000,000.00", "oldValue": "$500,000,000.00" } ]; cmp.set('v.data', changes); } }) |
Wrapper Class Iteration
The Following Example shows how to iterate the wrapper class collections
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
public with sharing class WrapperController { @AuraEnabled public static List<WrapperClass> getList() { List<WrapperClass> wrapperIns = new List<WrapperClass>(); for(Integer i=0 ; i<10 ;i++){ wrapperIns.add(new WrapperClass('Name'+i , 'Value'+i)); } return wrapperIns ; } public class WrapperClass{ public WrapperClass(String name , String value){ this.name = name ; this.value = value ; } @AuraEnabled public String name {get;set;} @AuraEnabled public String value {get;set;} } } |
|
1 2 3 4 5 6 7 |
<aura:component controller="WrapperController"> <aura:attribute name="Wrapper" type="WrapperController[]"/> <aura:handler name="init" value="{!this}" action="{!c.init}"/> <aura:iteration items="{!v.Wrapper}" var="item"> {!item.name} -- {!item.value} <br/> </aura:iteration> </aura:component> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
({ init: function (cmp) { var action = cmp.get("c.getList"); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { cmp.set('v.Wrapper', response.getReturnValue()); } }); $A.enqueueAction(action); } }) |
Server Side Controller
The following example shows how to iterate the server-side data
|
1 2 3 4 5 6 |
public with sharing class ContactController { @AuraEnabled public static List<Contact> getContacts() { return [Select Id, FirstName, LastName, Email, Phone From Contact ]; } } |
|
1 2 3 4 5 6 7 |
<aura:component controller="ContactController"> <aura:attribute name="contacts" type="Contact[]"/> <aura:handler name="init" value="{!this}" action="{!c.init}"/> <aura:iteration items="{!v.contacts}" var="contact"> {!contact.LastName} -- {!contact.FirstName} <br/> </aura:iteration> </aura:component> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
({ init: function (cmp) { var action = cmp.get("c.getContacts"); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { cmp.set('v.contacts', response.getReturnValue()); } }); $A.enqueueAction(action); } }) |
Iteration Index
The Following code shows how to get the index of iteration position.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<aura:component> <aura:attribute name="items" type="List" default="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]"/> <aura:attribute name="setIndexesInInit" type="Boolean" default="true" /> <aura:attribute name="start" type="Object" default="0"/> <aura:attribute name="end" type="Object" default="10"/> <aura:handler name="init" value="{!this}" action="{!c.init}"/> <aura:iteration aura:id="iteration" items="{!v.items}" var="var" indexVar="idx" start="{!v.start}" end="{!v.end}"> <ul> <li> Index {!idx} And Value is {!var}</li> </ul> </aura:iteration> </aura:component> |
