0

I want to render a table dynamically in lightning. I have a list of data of transaction (Custom object) and list of string which contains API name which data i want to render.

I have created a child component and wrapped it in nested aura iteration to display the data. But I am unable to access the value.

<aura:iteration items="{!v.Transactions}" var="trans">
       <tr>
       <aura:iteration items="{!v.fieldNames}" var="field" indexVar="ind">
         <td><c:TransactionOutputField object="{!trans}" fieldName="{!field}"/></td>
       </aura:iteration>
       </tr>
</aura:iteration>

child component

<aura:component>
  <aura:attribute name="object" type="Object" />
  <aura:attribute name="fieldName" type="String" />
  <aura:attribute name="fieldVal" type="String" access="private" />
  <aura:handler name="init" value="{!this}" action="{!c.myAction}"/>

  {!v.fieldVal}
</aura:component>

controller

({
    myAction : function(component, event, helper) {

        var sobject = component.get("{!v.object}");
        var fieldName  = component.get("{!v.fieldName}");


        console.log(JSON.stringify(sobject));
        console.log(fieldName);

        var value = sobject[fieldName];
        component.set("v.fieldVal", value);

        console.log(value);


    }
})

debug value in browser

{"Id":"a0l1q000000BYLPAA4","Name":"0002000331","akritiv__Amount__c":400,"akritiv__Balance__c":400,"akritiv__Days_Past_Due__c":358,"akritiv__Source_System__c":"SAPG","akritiv__Batch_Number__c":"20181003124027"}
components/c/TransactionOutputField.js:17 Name
components/c/TransactionOutputField.js:22 0002000331
components/c/TransactionOutputField.js:16 {"Id":"a0l1q000000BYLPAA4","Name":"0002000331","akritiv__Amount__c":400,"akritiv__Balance__c":400,"akritiv__Days_Past_Due__c":358,"akritiv__Source_System__c":"SAPG","akritiv__Batch_Number__c":"20181003124027"}
components/c/TransactionOutputField.js:17 akritiv__balance__c
components/c/TransactionOutputField.js:22 undefined
components/c/TransactionOutputField.js:16 {"Id":"a0l1q000000BYLPAA4","Name":"0002000331","akritiv__Amount__c":400,"akritiv__Balance__c":400,"akritiv__Days_Past_Due__c":358,"akritiv__Source_System__c":"SAPG","akritiv__Batch_Number__c":"20181003124027"}
components/c/TransactionOutputField.js:17 akritiv__source_system__c
components/c/TransactionOutputField.js:22 undefined
components/c/TransactionOutputField.js:16 {"Id":"a0l1q000000BYLPAA4","Name":"0002000331","akritiv__Amount__c":400,"akritiv__Balance__c":400,"akritiv__Days_Past_Due__c":358,"akritiv__Source_System__c":"SAPG","akritiv__Batch_Number__c":"20181003124027"}
components/c/TransactionOutputField.js:17 akritiv__batch_number__c
components/c/TransactionOutputField.js:22 undefined
components/c/TransactionOutputField.js:16 {"Id":"a0l1q000000BYLPAA4","Name":"0002000331","akritiv__Amount__c":400,"akritiv__Balance__c":400,"akritiv__Days_Past_Due__c":358,"akritiv__Source_System__c":"SAPG","akritiv__Batch_Number__c":"20181003124027"}
components/c/TransactionOutputField.js:17 akritiv__Notes__c
components/c/TransactionOutputField.js:22 undefined
components/c/TransactionOutputField.js:16 {"Id":"a0l1q000000BYLQAA4","Name":"0002000332","akritiv__Amount__c":0,"akritiv__Balance__c":0,"akritiv__Source_System__c":"SAPG","akritiv__Batch_Number__c":"20181003124027"}
components/c/TransactionOutputField.js:17 Name
components/c/TransactionOutputField.js:22 0002000332
components/c/TransactionOutputField.js:16 {"Id":"a0l1q000000BYLQAA4","Name":"0002000332","akritiv__Amount__c":0,"akritiv__Balance__c":0,"akritiv__Source_System__c":"SAPG","akritiv__Batch_Number__c":"20181003124027"}
components/c/TransactionOutputField.js:17 akritiv__balance__c
components/c/TransactionOutputField.js:22 undefined
components/c/TransactionOutputField.js:16 {"Id":"a0l1q000000BYLQAA4","Name":"0002000332","akritiv__Amount__c":0,"akritiv__Balance__c":0,"akritiv__Source_System__c":"SAPG","akritiv__Batch_Number__c":"20181003124027"}
components/c/TransactionOutputField.js:17 akritiv__source_system__c
components/c/TransactionOutputField.js:22 undefined
0

2 Answers 2

1

You are in right direction. You need to do sobject[fieldName] instead of obj.field.

var sobject = component.get('v.objName'); //There is also some syntax error so you need to fix them as well
var fieldName = component.get('v.fieldName');
var formatText = component.find("fielddata");
if(!fieldName.includes('.')) {
    formatText.set("v.value",sobject[fieldName]); //sobject[fieldName] this is the key here to get the data
}

Child component

<aura:component >
    <aura:attribute name="objName" type="String" />
    <aura:attribute name="fieldName" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <lightning:formattedText aura:id="fielddata" />
</aura:component>

You can check complete code here

8
  • Hey @tushar , I am getting data only for Name field and undefined for all the other. Can you please help me ?
    – Ranjank
    Commented Jan 16, 2019 at 11:11
  • {"Id":"a0l1q000000BYLLAA4","Name":"0002000327","akritiv__Amount__c":0,"akritiv__Balance__c":0,"akritiv__Source_System__c":"SAPG","akritiv__Batch_Number__c":"20181003124027"} Name 0002000327 {"Id":"a0l1q000000BYLLAA4","Name":"0002000327","akritiv__Amount__c":0,"akritiv__Balance__c":0,"akritiv__Source_System__c":"SAPG","akritiv__Batch_Number__c":"20181003124027"} akritiv__balance__c undefined
    – Ranjank
    Commented Jan 16, 2019 at 11:13
  • @Cooolranjan you should check if you are using correct syntax. Share your updated code. Commented Jan 16, 2019 at 11:46
  • Hi @tushar-sharma , I shared the updated code and the debug value I am getting in the browser.
    – Ranjank
    Commented Jan 16, 2019 at 11:53
  • @Cooolranjan instead of this component.get("{!v.object}"); do this component.get('v.object'); same for field as well and then share the error if you face any. Commented Jan 16, 2019 at 12:22
3

Your controller JS is of the wrong syntax. We dont use {!} to access data attribute vale in Javascript. We just use 'v.attributeName'. Also your syntax to access map values is wrong. We use MapObject[keyName] to access maps.

({
    myAction : function(component, event, helper) {

        var obj = component.get("v.object");
        var field = component.get("v.fieldName");

        console.log(JSON.stringify(obj));
        console.log(field);

        var value = obj[field];
        console.log(value);

        component.set("v.fieldVal", value);

    }
})

Src: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

You must log in to answer this question.

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