Usages of Lightning is increasing day by day. We face many challenge while doing development in Lightning. One of the challenge which I face recently is we can’t iterate map in lightning using aura:iteration. Map is commonly used collection type which provide Key value pair to easy binding of data.
Today I will shae a code sample of how we can iterate map in Lightning easily.
First we need a Controller which will return Map to us.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public class MapIterationController { | |
@AuraEnabled | |
public static Map < String, String > fetchMapData() { | |
Map < String, String > mapOppAccount = new Map < String, String >(); | |
for(Opportunity opp : [SELECT ID, Account.Name, Name FROm Opportunity LIMIT 5]) | |
mapOppAccount.put(opp.Name, opp.Account.Name); | |
return mapOppAccount; | |
} | |
} |
Next we will create an APP to display It on UI.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:application controller="MapIterationController" extends="force:slds"> | |
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/> | |
<aura:attribute name="oppAccountList" type="List" /> | |
<div class="slds-m-around_small"> | |
<div class="slds-page-header"> | |
<div class="slds-media"> | |
<div class="slds-media__body"> | |
<div class="slds-box slds-theme_shade"> | |
<p> <h1>Map Iteration in Lightning Component</h1></p> | |
</div> | |
<br/><br/> | |
<p class="slds-text-body_small slds-line-height_reset"> | |
<div class="slds-table–header-fixed_container"> | |
<div class="slds-scrollable_y" > | |
<table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered slds-table_striped"> | |
<thead> | |
<tr class="slds-text-title_caps"> | |
<th scope="col"> | |
<div title="Key">Key</div> | |
</th> | |
<th scope="col"> | |
<div title="Value">Value</div> | |
</th> | |
</tr> | |
</thead> | |
<tbody> | |
<aura:iteration items="{!v.oppAccountList}" var="opp" indexVar="key"> | |
<tr> | |
<th scope="col"> | |
<div title="{!opp.key}">{!opp.key}</div> | |
</th> | |
<th scope="col"> | |
<div title="{!opp.value}">{!opp.value}</div> | |
</th> | |
</tr> | |
</aura:iteration> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</p> | |
</div> | |
</div><br/> | |
</div><br/> | |
</div> | |
</aura:application> |
We can easily iterate map in Javascript. So in App controller we will iterate this Map and will create a List. Now we can easily iterate that List in the app.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
doInit : function(component, event, helper) { | |
var action = component.get("c.fetchMapData"); | |
action.setCallback(this, function(response) { | |
var state = response.getState(); | |
if (state === "SUCCESS") { | |
var custs = []; | |
var conts = response.getReturnValue(); | |
for(var key in conts){ | |
custs.push({value:conts[key], key:key}); //Here we are creating the list to show on UI. | |
} | |
component.set("v.oppAccountList ",custs); | |
} | |
}); | |
$A.enqueueAction(action); | |
} | |
}) |
This is the output which we will get.
Do you like the post. Or want to say anything. Please let me know in comments section.
How would one go about doing a similar call to an Apex method, only with arguments as well?
You can pass parameter action.setParams({recordId: recordId}); and in controller create parameter method.