I am trying to dynamically create a data table with two arrays (SObject array and a String array which has field API name).
The two arrays are Contact[] and String[], where String[] consists of ["Id", "Name"].
What I've tried dot notation and square bracket notation but neither worked.
<!-- row -->
<aura:iteration item="{!v.contacts} var="contact">
<!-- column -->
<aura:iteration item="{!v.fieldNames} var="fieldName">
{!contact.fieldName}
{!contact[fieldName]}
</aura:iteration>
</aura:iteration>
Not quite sure what is the correct approach to do this.
Best Answer
As far as I can tell, Lightning components don't support that dynamic reference syntax.
You could consider dynamically generating the content of this component with the component controller:
Component
Client-side Controller
Server-side Controller
Or you could use a second component that sets the value through the component's renderer:
Component
Client-side Controller
Server-side Controller
Component -- ContactAndFieldName
ContactAndFieldNameRenderer
If an init event is used instead of putting the javascript in the renderer:
Component -- ContactAndFieldName
ContactAndFieldNameController
(no custom renderer, and everything else is the same)