Turn on – Lightning Part 5 (Iteration over Map)

Currently as per Aura documents, it only supports list but whereas the Map collection type can be used very well in javascript controller.

Scenario: Customer wants to display the list of Open Opportunities by grouping them on Stage.

You can view this in action here:

Step 1: Apex Controller Class to fetch the list of open opportunities

public class DisplayOpptys {
public static Map<String, List<Opportunity>> fetchOpptyRecords(){
List<Opportunity> opptylist;
Map<String, List<Opportunity>> opptylistStageMap = new Map<String, List<Opportunity>>();

for(Opportunity oppty : [SELECT Id, Name, StageName, Amount FROM Opportunity
where isClosed =: false]){
opptylist = opptylistStageMap.get(oppty.StageName);
} else {
opptylist = new List<Opportunity>();
opptylistStageMap.put(oppty.StageName, opptylist);
return opptylistStageMap;
  • Here fetchOpptyRecords() method will return the List of opportunities for the given Opportunity Stage.

Step 2: Creating a lightning component:

<aura:component controller="DisplayOpptys" implements="forceCommunity:availableForAllPageTypes" access="global">

<ltng:require styles="{!$Resource.SLDS090 + '/assets/styles/salesforce-lightning-design-system.min.css'}"/>
<aura:attribute name="Opportunities" type="Opportunity[]"  />

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="container">
<div class="slds-p-top--medium slds-p-left--medium">
<fieldset class="slds-form--compound custom-border">
<aura:iteration items="{!v.Opportunities}" var="opp" indexVar="key">
<div class="slds-grid">
<div class="slds-col">
<div class="slds-has-divider--top">
<b><ui:outputText aura:id="oppStage" value="{!opp.key}" /></b></div>
<div class="slds-has-divider--top">
<aura:iteration items="{!opp.value}" var="oppVal">
<div class="slds-grid slds-grid--align-space">
<ui:outputText aura:id="oppName" value="{!oppVal.Name}" />
<ui:outputText aura:id="oppName" value="{!oppVal.Amount}" /></div>
  • Here the iteration is iterating over the opportunities attribute which has been declared as list but it will be behaving as Map because we build the list attribute in the same way as Map (checkout the Step 3 and Step 4)
  • The outer iteration will give you the keys (opportunity stage name) and the inner iteration will give you the related list of opportunities.

Step 3: Controller javascript code:

doInit : function(component, event, helper) {

Step 4: Helper javascript code:

fetchRecords : function(component,event, helper) {
var action = component.get("c.fetchOpptyRecords");
action.setCallback(this, function(resp) {
var state=resp.getState();
console.log('state ' + state);
if(state === "SUCCESS"){
var res = resp.getReturnValue();
var opptylist = [];
var key;
for(key in res){
opptylist.push({key: key, value: res[key]});
component.set("v.Opportunities", opptylist);

  • Here the local variable ‘res’ will be holding the response of our apex method which is Map<String, List>
  • Opptylist is another local variable declared as array but it is build in the form of key – value pair.

Please feel free to post your queries/thoughts.

Happy Coding!!!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s