Iterate map values in Salesforce Lightning component

Screen Shot 2018-09-15 at 10.06.19 PM.png

aura:iteration iterates over a collection of items and renders the body of the tag for each item.

Data changes in the collection are rerendered automatically on the page. aura:iteration supports iterations containing components that have server-side dependencies or that can be created exclusively on the client-side.

Attribute Name Type Description
body ComponentDefRef[] Required. Template to use when creating components for each iteration. You can put any markup in the body. A ComponentDefRef[] stores the metadata of the component instances to create on each iteration, and each instance is then stored in realbody.
indexVar String The variable name to use for the index of each item inside the iteration.
items List Required. The collection of data to iterate over.
var String Required. The variable name to use for each item inside the iteration.

So, Let me explain with an example:

Here you go…..

  • Create an component controller class(IterateController)
  • In this apex class ,you have @AuraEnabled , fetchMapvalues() method which return type is Map type.
  • first created a new map called MapTest .

Apex Class:

public class IterateController {
@AuraEnabled
public static Map < String, String > fetchMapvalues() {
Map < String, String > MapTest = new Map < String, String >();
MapTest.put(‘Test1’, ‘Jaya’);
MapTest.put(‘Test2’, ‘Krishna’);
MapTest.put(‘Test3’, ‘WordPress’);
MapTest.put(‘Test4’, ‘Com’);
system.debug(MapTest);
/ return map
return MapTest;
}
}

 

Component:

I have used two interfaces while creating component without also you can implement. It makes  lightning components work in a Salesforce community, both on the desktop and SF1 app

force:appHostable,flexipage:availableForAllPageTypes

flexipage
Provides interfaces that are specific to Lightning Pages and the Lightning App Builder.
force
Provides interfaces that are specific to Lightning Experience and the Salesforce app.

<aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes” access=”global” controller=”IterateController”>
<ui:button label=”Fetch” press=”{!c.fetch}”/>
<br/><br/>
<aura:attribute name=”ShowTest” type=”Boolean” default=”false”/>
<aura:attribute name=”customers” type=”List” />
<aura:renderIf isTrue=”{!v.ShowTest}”>
<aura:iteration items=”{!v.customers}” var=”cus” indexVar=”key”>
{!cus.key} – {!cus.value}<br/><br/>
</aura:iteration>
</aura:renderIf>
</aura:component>

 

Controller.js

({
fetch : function(component, event, helper) {
var custNo = component.get(“v.custNo”);
var action = component.get(“c.fetchMapvalues”);
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});
}
component.set(“v.customers”, custs);
component.set(“v.ShowTest”, true);
}
});
$A.enqueueAction(action);
}
})

Create APP:

<aura:application >
<c:IterateMapExample/>
</aura:application>

Output:

Screen Shot 2018-09-15 at 10.06.19 PM.png

 

Advertisements

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