Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.
Sign up to join this community
Is it possible to iterate over a Map in an aura:iteration. It doesn't give me a compile or runtime error but it doesn't appear to work.
My thought is that it works similarly to $.each in jquery.
<aura:attribute type="Map" name="myMap" default="{key1: 'item1', key2: 'item2'}" />
<aura:iteration items="{!myMap}" indexVar="key" var="item">
{!key} : {!item}
</aura:iteration>
According to the Aura docs it looks like this is only defined to iterate over a List.
If you have not seen the Aura docs app before it is available with any Salesforce instance by modifying the URL:
[your instance stuff].salesforce.com/auradocs/reference.app
Or to navigate to the page for the iteration component:
[your instance stuff].salesforce.com/auradocs/reference.app#reference?descriptor=aura:iteration&defType=component
aura:iteration from the open source project, if you want to see how it works. It may not be exactly this in the Lightning implementation, but will give you an idea. github.com/forcedotcom/aura/blob/master/aura-components/src/…
– pchittum
Jun 6 '15 at 22:05
I came across this question and was a little discouraged, but looks like things might have changed since some of these answers were provided.
I found this page in the Lightning Components documentation. All the way at the bottom, and really easy to overlook is what appears to be instructions for iterating over an Apex Map returned from a server-side controller.
I tried it out and it actually works! This controller function populates a picklist <ui:inputSelect ... /> in a Lightning Component by iterating over an Apex Map.
I guess this doesn't exactly answer the original question, but maybe the workaround is to do the iteration in a controller function and provide those results to the view.
({
doInit : function(component, event, helper) {
// Create the action
var action = component.get("c.getApexMap");
// Add callback behavior for when response is received
action.setCallback(this, function(response) {
var state = response.getState();
console.log(state);
if (component.isValid() && state === "SUCCESS") {
//loop through map returned from Server, populating client picklist as we go
var clientMap = response.getReturnValue(); //the apex map returned from server
var opt = new Array(); //this will be our picklist options
for(key in clientMap) { //this iterates over the returned map
opt.push({ class: "optionClass", label: clientMap[key].labelField__c,
value: clientMap[key].valueField__c });
}
component.find("myPicklist").set("v.options", opt);
} else {
console.log("Failed with state: " + state);
}
});
// Send action off to be executed
$A.enqueueAction(action);
}
})
Not a straight Yes to the original question. The Maps can not go in directly, but we can use some thing like this.
Maps or list, all the collections are same for lightning components as it considers all these variables as json.
Try the following: Component:
<aura:component >
<aura:attribute name="colercodes" type="list"/>
<ui:button press="{!c.getColCodes}" label="Display Colors" />
<aura:iteration items="{!v.colercodes}" indexVar="key" var="col">
<p>
<aura:set attribute="style" value="{!col.BGvalue}"/>
{!key}: {!col.key} - {!col.value}
</p>
</aura:iteration>
</aura:component>
ComponentController.js:
({
getColCodes: function(component) {
var cols = [];
cols.push({
value: '#F0F8FF',
BGvalue: 'background:#F0F8FF',
key: 'AliceBlue'
});
cols.push({
value: '#00FFFF',
BGvalue: 'background:#00FFFF',
key: 'Aqua'
});
cols.push({
value: '#FAEBD7',
BGvalue: 'background:#FAEBD7',
key: 'AntiqueWhite'
});
cols.push({
value: '#7FFFD4',
BGvalue: 'background:#7FFFD4',
key: 'Aquamarine'
});
component.set("v.colercodes", cols);
}
})
===================
I happened to use something like this in one of my projects:
({
doInit : function(component, event, helper) {
var action = component.get("c.returnArticles");//Fetching Map/queryresult from Controller
action.setCallback(this, function(a) {
component.set("v.ArticleMap", a.getReturnValue());
var Arts = component.get("v.ArticleMap");
console.log(Arts);
var artsTemp = [];
for (Art in Arts){
console.log(Art);
var temp = Arts[Art]
for (keyofMap in temp){
//pushing the articles into Map/ List of component attribute
artsTemp.push({
key: keyofMap,
value: temp[keyofMap]
});
}
}
component.set("v.ArticleList", artsTemp);
});
$A.enqueueAction(action);
}
})
Note: I was returning database.query() from the apex controller there.
We can not directly use the maps like we do in VF pages, we can pass that maps to json variable as they are and use them in components.
HTH
In the controller, for getting the value of specific key, use
var testMap = component.get('v.myWrapper');
var value = testMap.myMap[key];
Like @Prabhan I found that using object array in the client side component was the only way to get iteration to work.
My question was "With Lightning Components how can you iterate over a client side list of objects or map?"
Maybe someone can improve on this or show a complete example in the docs. In my case I needed to display a list of properties from a Case record.
BetaCaseController
public with sharing class BetaCaseController {
@AuraEnabled
public static Case getCase(Id id) {
Case aCase = [
select Id, ParentId, CaseNumber, CreatedDate, Description, IsClosed, IsDeleted, Origin, OwnerId, Priority, Reason, Status, Subject, Type, ClosedDate, AccountId, ContactId
from Case WHERE Id = :id
];
// Perform isAccessible() check here
return aCase;
}
}
BetaComponent
<aura:component controller="BetaCaseController"
implements="flexipage:availableForRecordHome,force:hasRecordId"
access="global">
<aura:attribute name="theCase" type="Case" />
<aura:attribute name="properties" type="list" />
<aura:attribute name="recordId" type="String" />
<aura:attribute name="message" type="String" default="empty" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="slds-form" role="list">
<aura:iteration items="{!v.properties}" indexVar="key" var="prop">
<div class="slds-grid slds-gutters_small">
<div class="slds-col slds-has-flexi-truncate" role="listitem">
<div
class="slds-form-element slds-form-element_edit slds-hint-parent">
<div class="slds-form-element__label">{!prop.label}</div>
<div class="slds-form-element__control">{!prop.value}</div>
</div>
</div>
</div>
</aura:iteration>
</div>
<div>T8</div>
</aura:component>
BetaComponentComponent.js
({
doInit : function(component, event, helper) {
var action = component.get("c.getCase");
action.setParams({"id": component.get("v.recordId")});
action.setCallback(this, function(response){
var state = response.getState();
component.set("v.message", state);
if (state === "SUCCESS") {
var theCase = response.getReturnValue();
component.set("v.theCase", theCase);
var properties = [];
properties.push({ 'label' : 'CaseNumber', 'value': theCase.CaseNumber});
properties.push({ 'label' : 'Subject', 'value': theCase.Subject});
properties.push({ 'label' : 'Status', 'value': theCase.Status});
properties.push({ 'label' : 'Parent', 'value': theCase.Parent});
properties.push({ 'label' : 'IsClosed', 'value': theCase.IsClosed});
component.set("v.properties", properties);
}
});
$A.enqueueAction(action);
},
})
