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
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

  • Hey @tushar , I am getting data only for Name field and undefined for all the other. Can you please help me ? – Ranjank Jan 16 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 Jan 16 at 11:13
  • @Cooolranjan you should check if you are using correct syntax. Share your updated code. – Tushar Sharma Jan 16 at 11:46
  • Hi @tushar-sharma , I shared the updated code and the debug value I am getting in the browser. – Ranjank Jan 16 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. – Tushar Sharma Jan 16 at 12:22
2

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

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.