1

I am trying to build a configurable component using design attributes where we show data in a table based on the field fected from a SOQL query. Please find below the code:

Component:

<aura:attribute name="records" type="List" />
<aura:attribute name="objectname" type="String" />
<aura:attribute name="objectfieldname"  type="String" />
<aura:attribute name="columnheaders"  type="String" />
<aura:attribute name="headerlist" type="List"/>
<aura:attribute name="fieldlist" type="List"/>
<aura:attribute name="numberofrecorddeisplayed"  type="Integer" />

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<!-- Use a data table from the Lightning Design System: https://www.lightningdesignsystem.com/components/data-tables/ -->
<table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
    <thead>
        <tr class="slds-text-heading_label">
            <aura:iteration items="{!v.headerlist}" var="head">
                <th scope="col"><div class="slds-truncate" title="ID">{!head}</div></th>
            </aura:iteration>
        </tr>            
    </thead>
    <tbody>
        <aura:iteration items="{!v.records}" var="record">
            <tr>
                <aura:iteration items="{!v.fieldlist}" var="flds">
                    <td>{!record.flds}</td>
                </aura:iteration>
            </tr>
        </aura:iteration>
    </tbody>
</table>

in the section of the table body

{!record.flds}

v.records contain the record sent from the apex controllers SOQL. and v.fieldlist contain the field names e.g. id,name,company from Accounts (but the field list is dynamic and is based on the fields populated in the property attribute of the component separated by commas.

But there is some issues with the implementation {!record.flds} is not showing any values in the table.

2

You can't dynamically access values in a Map. What you're going to need to do is to make a flat list for each record, then access them in order.

    <aura:iteration items="{!v.records}" var="record">
        <tr>
            <aura:iteration items="{!record.values}" var="flds">
                <td>{!flds}</td>
            </aura:iteration>
        </tr>
    </aura:iteration>

I realize it's pretty inconvenient, but that's the way it has to be. You can transform your data to the appropriate format via a series of map calls to flatten everything out, probably something like this:

var fields = ...;
var records = ...;
var results = records.map(
  function(record) { 
    return { values: fields.map(
      function(field) {
        return record[field];
      })
    }
  });

Which will end up creating a table like this:

[
  { values: [ "field1value", "field2value", ... ] },
  { values: [ "field1value", "field2value", ... ] },
  ...
]
|improve this answer|||||
0

Try accessing the properties using bracket notation instead of the dot notation. For instance, {!record.flds} would try to get the property named "flds" from the object records.

Whereas {!record[flds]} would get the property dynamically based on the value of variable flds

|improve this answer|||||
  • 1
    This doesn't work, because you get an error: expecting a positive integer, found 'flds' at column X of expression: record[flds]: Source – sfdcfox Nov 21 '18 at 7:35

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.