1) Simply storing and displaying value from the map in the lightning component.
2) Displaying map by using aura iteration.
Case 1) Simply storing and displaying value from the map in the lightning component.
Let's understand with a simple example.
STEP 1) Build A Lightning Component.
<aura:component
controller="Mapvalue" >
<aura:handler name="init"
value="{!this}" action="{!c.doinit}"/>
<aura:attribute type="map"
name="Mapuse"/> // Map type
attribute to hold map value
{!v.Mapuse.key1}
{!v.Mapuse.key2}
{!v.Mapuse.key3}
</aura:component>
Note: The init method get's call after the construction of component is over and will call doinit method in the javascript controller.
STEP 2) Build A Javascript Controller,
({
doinit : function(component, event, helper)
{
var action= component.get('c.getmymap'); // Calling apex method
action.setCallback(this,function(response) // getting response back from apex method
{
var
state=response.getState(); //
getting the state
if(state==='SUCCESS')
{
component.set('v.Mapuse',response.getReturnValue()); // setting the value in map attribute
}
});
$A.enqueueAction(action);
}
})
STEP 3) Build Apex Controller,
public
class Mapvalue {
@AuraEnabled // Method must be AuraEnabled in apex
public static map<string,string>
getmymap()
{
map<string,string> putkeyvalue=
new map<string,string>();
putkeyvalue.put('key1', 'Value1'); // Setting key,value in map
putkeyvalue.put('key2', 'Value2');
putkeyvalue.put('key3', 'Value3');
return putkeyvalue;
}
}
Step 4: Previewing With An Application,
<aura:application
extends="force:slds">
<c:Firstlightningcomponent/>
</aura:application>
After Preview,
Case 2) Displaying map by using aura iteration.
STEP 1) APEX Controller,
public
class mapIterateApexClass {
@AuraEnabled // Method must be AuraEnabled in apex
public static map<string,string>
getmymap()
{
map<string,string> putkeyvalue=
new map<string,string>();
putkeyvalue.put('key1', 'Value1'); // Setting key,value in map
putkeyvalue.put('key2', 'Value2');
putkeyvalue.put('key3', 'Value3');
return putkeyvalue;
}
}
<aura:component
controller="mapIterateApexClass" >
<aura:attribute type="list"
name="list1"/>
<aura:attribute type="map"
name="map1"/>
<ui:button label="Iterate Map in
lightning component" press="{!c.getMapValues}" />
<aura:iteration
items="{!v.list1}"
var="key"> // Iterating over keys in list
<c:mapIterationChild
map="{!v.map1}" key="{!key}" /> // Calling child component
</aura:iteration>
</aura:component>
STEP 3) mapIterationController.js
({
getMapValues : function(component, event,
helper) {
var action= component.get('c.getmymap');
action.setCallback(this,function(response)
{ var arrayToStoreKeys=[]; // Declaring array to store values.
var
state=response.getState();
var response1=response.getReturnValue();
if(state==='SUCCESS')
{
component.set('v.map1',response.getReturnValue()); // Storing response in map.
}
for(var key in response1 )
{
arrayToStoreKeys.push(key); // Pushing keys in array
}
component.set('v.list1',arrayToStoreKeys); // Storing keys in list.
});
$A.enqueueAction(action);
}
})
STEP 4) Create a lightning component name="mapIterationChild.cmp".
<aura:component >
<aura:handler name="init" value="{!this}"
action="{!c.doinit}"/>
<aura:attribute type="map"
name="map"/>
<aura:attribute type="string"
name="key"/>
<aura:attribute type="string"
name="value"/>
{!v.key}-------{!v.value} // Displaying Key,Value.
</aura:component>
STEP 5) mapIterationChildController.js
({
doinit : function(component, event, helper) {
var key=component.get("v.key");
var
map=component.get("v.map");
component.set("v.value",map[key]);
}
})
STEP 6) Application to run the above component
<aura:application
extends="force:slds">
<c:mapIteration></c:mapIteration>
</aura:application>
STEP 7) After Preview,
No comments:
Post a Comment