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);
},
})