This question already has an answer here:

I have a component which will display a list of records in the table and user can edit and update each and every row.

Issue: Since I have static aura:id inside aura:iteration, whenever am trying to edit and save the second record without refreshing the page after updating the first record, it is throwing the error on component.get().

Ex Component:

<aura:iteration items="{!v.freightChargesAir}" var="fcair" indexVar="index"> 
   <tr class="slds-hint-parent"> 
     <td class="slds-truncate slds-size--1-of-10" data-label="Name" >                                        
         <UI:inputText aura:id="frequencyEdit" value="{!fcair.Frequency__c}"></UI:inputText>
     </td>
     <td class="slds-truncate slds-size--21" data-label="dest"> 
         <a tabindex="{!index}" onclick="{!c.saveFreightEdit}" id="{!fcair.Id}">
            <lightning:icon iconName="action:record" size="x-small" alternativeText="Indicates approval"/>
         </a>
     </td>
 </tr>

Ex Controller:

saveFreightEdit: function(component, event, helper) {

    var recId =  event.target.id;
    var frequencyfind = component.find("frequencyEdit");
    var frequency = frequencyfind.get("v.value");  //Getting error here on second record save if page is not refreshed
    //logics goes on...

}

Since aura:id doesn't support dynamic Id's, I couldn't able to get this done as expected.

I tried replacing the UI:InputText with Lighting:input and ID attribute to get the value from DOM element but ended in no luck. Getting undefined error if I use document.getElementById.

I faced similar issue with document.getElementsByClassName as well.

Is there any way to get this working?

marked as duplicate by David Reed, glls, Sebastian Kessel, Gortonington, Prafulla Patil Dec 5 at 21:50

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

up vote 3 down vote accepted

Since you have the Id of the record, you can just use Array#find.

var freqRow = component.get("v.freightChargesAir").find(row => row.Id === event.target.id);
// ...freqRow.Frequency__c has the edited value

From here, you have the full object that represents your record.

  • Thanks for this easiest answer and this works like a wonder. I got to know there is something like this existing in javascript lightning controller. Thank you so much. But the only problem is, whenever I try to edit and save the row(record) which is already edited and saved, am getting [component.find(...).get is not a function] error. – mohammed azarudeen Dec 5 at 10:36
  • @mohammedazarudeen My answer was to grab all the rows of data stored in the attribute "freightChargesAir", then find the specific row using Array#find. Incorrect: component.find(...).get(...) Correct: component.get(...).find(...). – sfdcfox Dec 5 at 15:24
  • My apologies sfdcfox. It is due to the code logic I have in the bottom of the function. I corrected that issue and ofcourse yeah it is working very well without any issues. Thanks for the answer. I got to know the new thing. Marking this as best answer. – mohammed azarudeen Dec 6 at 16:36

Not the answer you're looking for? Browse other questions tagged or ask your own question.