0

I am adding a buttonIcon for each aura:iteration record in my interface. I need to get the Id of the row that the button is on.

Here is my component code:

<aura:iteration items="{!v.proformaDetailsIncome}" var="profIncome" indexVar="index">
                <tr>
                    <td data-label="Type">
                        <div clas="slds-truncate">
                            <lightning:buttonIcon iconName="utility:clear"  size="x-small" name="4" onclick="{!c.deleteRow}" title="Delete Income Record" value="{!index}" />
                        </div>
                    </td>
                    <td data-label="SubType">
                        <!--<div clas="slds-truncate" title="{#profIncome.SubType__c}">{#profIncome.SubType__c}-->
                            <input type="text" aura:id="iYear1" value="{#profIncome.SubType__c}" class="slds-input" onfocusout="{!c.updateDetailRecord}" data-Index="{!index}" data-Type="iYear" data-attrName="SubType__c"/>
                        <!--</div>-->

                    </td>
                    <td data-label="Year 1">
                        <input type="number" aura:id="iYear1" value="{#profIncome.Yr_1__c}" class="slds-input" onfocusout="{!c.updateDetailRecord}" data-Index="{!index}" data-Type="iYear" data-attrName="Yr_1__c"/>
                    </td>
                    <td data-label="Year 2">
                        <input type="number" aura:id="iYear2" value="{#profIncome.Yr_2__c}" class="slds-input" onfocusout="{!c.updateDetailRecord}" data-Index="{!index}" data-Type="iYear" data-attrName="Yr_2__c"/>
                    </td>
                    <td data-label="Year 3">
                        <input type="number" aura:id="iYear3" value="{#profIncome.Yr_3__c}" class="slds-input" onfocusout="{!c.updateDetailRecord}" data-Index="{!index}" data-Type="iYear" data-attrName="Yr_3__c"/>
                    </td>
                    <aura:if isTrue="{!v.showYear4}">
                        <td data-label="Year 4">
                            <input type="number" aura:id="iYear4" value="{#profIncome.Yr_4__c}" class="slds-input" onfocusout="{!c.updateDetailRecord}" data-Index="{!index}" data-Type="iYear" data-attrName="Yr_4__c"/>
                        </td>
                    </aura:if>
                    <aura:if isTrue="{!v.showYear5}">
                        <td data-label="Year 5">
                            <input type="number" aura:id="iYear5" value="{#profIncome.Yr_5__c}" class="slds-input" onfocusout="{!c.updateDetailRecord}" data-Index="{!index}" data-Type="iYear" data-attrName="Yr_5__c"/>
                        </td>
                    </aura:if>
                    <aura:if isTrue="{!v.showYear6}">
                        <td data-label="Year 6">
                            <input type="number" aura:id="iYear6" value="{#profIncome.Yr_6__c}" class="slds-input" onfocusout="{!c.updateDetailRecord}" data-Index="{!index}" data-Type="iYear" data-attrName="Yr_6__c"/>
                        </td>     
                    </aura:if>
                    <aura:if isTrue="{!v.showYear7}">
                        <td data-label="Year 7">
                            <input type="number" aura:id="iYear7" value="{#profIncome.Yr_7__c}" class="slds-input" onfocusout="{!c.updateDetailRecord}" data-Index="{!index}" data-Type="iYear" data-attrName="Yr_7__c"/>
                        </td>     
                    </aura:if>
                    <aura:if isTrue="{!v.showYear8}">
                        <td data-label="Year 8">
                            <input type="number" aura:id="iYear8" value="{#profIncome.Yr_8__c}" class="slds-input" onfocusout="{!c.updateDetailRecord}" data-Index="{!index}" data-Type="iYear" data-attrName="Yr_8__c"/>
                        </td>     
                    </aura:if>
                    <aura:if isTrue="{!v.showYear9}">
                        <td data-label="Year 9">
                            <input type="number" aura:id="iYear9" value="{#profIncome.Yr_9__c}" class="slds-input" onfocusout="{!c.updateDetailRecord}" data-Index="{!index}" data-Type="iYear" data-attrName="Yr_9__c"/>
                        </td>     
                    </aura:if>
                    <aura:if isTrue="{!v.showYear10}">
                        <td data-label="Year 10">
                            <input type="number" aura:id="iYear10" value="{#profIncome.Yr_10__c}" class="slds-input" onfocusout="{!c.updateDetailRecord}" data-Index="{!index}" data-Type="iYear" data-attrName="Yr_10__c"/>
                        </td>     
                    </aura:if>
                </tr>
            </aura:iteration>

I have been using the following two options, and neither is returning the requested value:

var currentTargetEvent = event.currentTarget;
var currentValue = currentTargetEvent.getAttribute("value");

or

var currentTargetEvent = event.currentTarget;
var currentValue = currentTargetEvent.value;

Any help is appreciated.

0

The target is a component, but you're trying to get an attribute of a DOM element. This won't work, of course. Instead, put the ID up a bit, and you can grab it:

<div clas="slds-truncate" data-id="{!profIncome.Id}">
    <lightning:buttonIcon iconName="utility:clear"  size="x-small" name="4" onclick="{!c.deleteRow}" title="Delete Income Record" value="{!index}" />
</div>

...

deleteRow: function(component, event, helper) {
  var recordId = event.target.closest("[data-id]").dataset.id;
}
| improve this answer | |
  • That worked. Thank you so much for that. Still learning a bit. – JP Blonshine May 20 at 18:01

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.