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?

1

1 Answer 1

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

2
  • 1
    Ok, so indeed child component to render the value - that's what I ended up with. Thank you for the answer. Commented Feb 24, 2016 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
    Commented Oct 18, 2016 at 20:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .