8

I want to do simple thing - I want to iterate over list of two objects and use displayColumns as dynamic keys to get values from selectList object:

<aura:attribute name="displayColumns" type="String[]"/>
<aura:attribute name="selectList" type="Object[]"/>


<table>
    <aura:iteration items="{!v.selectList}" var="elem">
    <tr>
        <aura:iteration items="{!v.displayColumns}" var="col">
            <td>{!elem[col]}</td>
        </aura:iteration>
    </tr>
    </aura:iteration>
</table>

In pure JS I would do: elem[col.value], but in lightning compiler returns:

expecting a positive integer, found 'col' at column 6 of expression: elem[col.value]: Source

Is there any workaround without creating proper object structure in controller?

10

Lightning aura:iteration over two objects with dynamic key

In this example I am using contact object and we will get contact' Account info as well as owner info..

For now I am hard-coded API name but you can use Field set as well..

Apex class

public class GetAFewContacts {

    @AuraEnabled
    public static list<Contact> getContacts(){
        return [SELECT Id, Name, Account.Name, Owner.Name, Owner.Email 
                  FROM Contact LIMIT 10];
    }

}

Component

<aura:component controller="GetAFewContacts"  implements="force:appHostable, flexipage:availableForAllPageTypes, forceCommunity:availableForAllPageTypes" access="global">
    <aura:attribute name="contacts" type="Contact[]" />
    <aura:attribute name="fieldNames" type="String[]" default='["Id","Name", "Account.Name", "Owner.Name", "Owner.Email"]'/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <table>
        <tr>
        <aura:iteration items="{!v.fieldNames}" var="fieldName">
            <th><ui:outputText value="{!fieldName}" /></th>
        </aura:iteration>
        </tr>
        <aura:iteration items="{!v.contacts}" var="contact" >
        <tr>
            <aura:iteration items="{!v.fieldNames}" var="fieldName">
                <td>
                <c:ContactAndFieldName contact="{!contact}" fieldName="{!fieldName}" />
                </td>
            </aura:iteration>
        </tr>
        </aura:iteration>
    </table>
</aura:component>

ControllerJS

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getContacts");
        action.setCallback(this,function(response){
                if (response.getState() === "SUCCESS"){
                    component.set("{!v.contacts}",response.getReturnValue());
                }
            }
        );
        $A.enqueueAction(action);
    }
})

InnerComponent

<aura:component >
    <aura:attribute name="contact" type="Contact" />
    <aura:attribute name="fieldName" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <ui:outputText aura:Id="outputTextId" />
</aura:component>

InnerComponentControllerJS

({
    doInit : function(component, helper) {
        var Contact = component.get('v.contact');
        var FieldName = component.get('v.fieldName');
        var outputText = component.find("outputTextId");
        if (FieldName.indexOf(".") >= 0) {
            var ParentSobject = Contact[FieldName.split(".")[0]];
            if(ParentSobject != undefined){
                outputText.set("v.value",ParentSobject[FieldName.split(".")[1]]);
            }
        }
        else{
            outputText.set("v.value",Contact[FieldName]);
        }
    }
})

Output

enter image description here

  • 1
    Ok, so indeed child component to render the value - that's what I ended up with. Thank you for the answer. – Maciek Simm Feb 24 '16 at 14:57
  • Can we not use force:outputField to render output like a link to a Lookup field instead of ID value showing up? I tried replacing ui:outputText with force:outputField it just shows empty space instead of any value in the output. – VarunC Oct 18 '16 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.