In this article we will go through:
- What is Aura Iteration
- How to use simple Iteration
- How to iterate over server side data
aura:iteration is used to iterate over a collection of items and renders the body of the tag for each item.
Syntax
<aura:iteration items="{!v.account}" var="a">
The items attribute tells the component which list to iterate
The var attribute let’s us name a variable that will contain the current element from the array we’re iterating over.
Simple Iteration
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="countries" type="String[]" default="['India','USA','Canada']"/>
<h1>List of Countries</h1>
<aura:iteration items="{!v.countries}" var="country">
<ul>
<li>{!country}</li>
</ul>
</aura:iteration>
</aura:component>
Output: Show List of Countries
The following example shows how to iterate over the server side data
Lightning Component: DemoAccount.cmp
<aura:component controller="DemoHelper" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<!--retreive list of accounts -->
<!--type=Account[] to hold account List-->
<aura:attribute name="accountList" type="Account[]" />
<lightning:button variant="brand" label="Show Account list" onclick="{!c.myAction }" />
<!-- Use iteration to display more than one record -->
<aura:iteration items="{!v.accountList}" var ="a">
<div class="slds-card">
<div class="slds-media__figure">
<lightning:icon iconName="action:approval" size="small"/>
</div>
<div class="slds-card__header slds-grid">{!a.Name}</div>
<div class="background">{!a.Phone}</div>
<div class="background">{!a.Type}</div>
</div>
</aura:iteration>
</aura:component>
Apex Controller: DemoHelper.apxc
public class DemoHelper {
@AuraEnabled
//return list of accounts from apex class
//made static so that we dont need to create an instance.Can call using class name
public static List<Account> checkMethod(){
List<Account> acclist = [Select Name,Type,Fax,Phone From Account];
return acclist;
}
}
Javascript Controller: DemoAccountController.js
({
myAction : function(component, event, helper) {
//1.DEFINE ACTION
//create variable to define action. Use var to store value
//If we use c inside javascript controller then it is apex controller
var action = component.get("c.checkMethod");
//2.SET CALLBACK
//inside callback function we are getting list of accounts
action.setCallback(this,function(response){
//3.SET VALUE TO ATTRIBUTE
//the list of accounts we are setting to the attribute accountlist
component.set("v.accountList",response.getReturnValue());
});
//4.ENQUE ACTION
$A.enqueueAction(action);
}
})
DemoAccountApp.css
.THIS {
background-color:blue;
color:white;
}
.THIS .background{
color:yellow;
}
Output- Click on a button to show list of Accounts
We can add it in the Lightning tab
Output
Reference
Aura Iteration
Lightning Documentation
https://developer.salesforce.com/docs/component-library/bundle/lightning:button/example
