1

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

Issue: Since I have static aura:id inside aura:iteration, whenever I'm 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>

</aura:iteration>

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

Improve this question
0

1 Answer 1

Reset to default
3

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.

Improve this answer
5
  • 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. Commented Dec 5, 2018 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(...). Commented Dec 5, 2018 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. Commented Dec 6, 2018 at 16:36
  • Hi @mohammedazarudeen, I'm facing the same kind of issue.Mine is a picklist field instead of a text field.Upon doing this "component.get().find(row => row.Id === event.target.id);" I get Undefined in my console.Can you please guide me in this. Commented May 28, 2019 at 7:00
  • @jayasuriyajanarthan It sounds like you have a different issue? I recommend asking a new question so you can get the help you need. Commented May 28, 2019 at 10:52

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.