In this article, we will see how to
implement nested iteration in the salesforce lightning components. Consider a scenario where you need to iterate through all contacts in each account and display
it as per the business needs, lightning aura component got capabilities to
iterate through each account and display its contacts.
Basically, we are going to achieve as shown below
Add the code mentioned below in your sandbox, create new components if required.
Component code [Component name:
Aura_Nested_Iteration]
<!-- *****************************************************
source
: codengine.in
Description : Aura component for nested
iteration
*****************************************************/
-->
<aura:component controller='poc'
implements="flexipage:availableForRecordHome,force:hasRecordId"
access="global" >
<aura:handler name='init' value='{!this}'
action='{!c.getAccAndContacts}' />
<aura:attribute name='accountSet' type='Account[]' default=''/>
<div>
<aura:iteration items="{!v.accountSet}"
var="acc">
<span> <b>Account id: </b> {!acc.Id} </span>
<span> <b>Account name: </b>{!acc.Name}
</span> <br/>
<br/>
<aura:iteration
items="{!acc.Contacts}" var='con'>
<div class='slds-m-left_large'>
{!con.LastName} </div> <br/>
</aura:iteration>
</aura:iteration>
</div>
</aura:component>
Client-side controller js code
({
getAccAndContacts
: function(component, event, helper) {
var
action = component.get('c.getAccountsWithContatcs');
action.setCallback(this, function(response){
var state = response.getState();
if(state === 'SUCCESS'){
var recordSet =
response.getReturnValue();
if(recordSet != ''){
component.set('v.accountSet', recordSet);
}
}
});
$A.enqueueAction(action);
},
})
Apex code [Apex class name: poc]
/*************************************************************************
source : codengine.in
Description
: Apex class to fetch accounts and related contacts
**************************************************************************/
public class poc {
@AuraEnabled
public static List<Account> getAccountsWithContatcs(list<String>
studentMasterId){
return [select Id, name, (select Id, lastname from contacts) from
Account limit 5];
}
}
You can debug js code in the browser to make sure you are getting the expected values in the client side.
Once you make all the changes, refresh the component page to see the changes.
In this post, we have seen the steps to
implement aura iteration in the salesforce lightning components. In case if you
see any issue, post it in the comments section below.
.png)
0 Comments