function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Saurabh Kulkarni 84Saurabh Kulkarni 84 

event.getSource().getLocalId() returning attribute as it is instead of attribute value

Hello All,

I have a situation where aura:iteration is running inside tbody of table to generate dynamic rows. Inside this row, I have a lightning:buttonIcon which has the aura id which is nothing but an attribute. When I do onclick of this buttonIcon which calls my controller method. When i try to fetch the aura id value it returns the attribute as it is instead the value.. Here's my example
 
<table>
   <thead>
   ..
   </thead>
   <tbody>
     <aura:iteration items="{!v.myList}" var="obj">
         <tr>
            <td>
                 <lightning:buttonIcon aura:id="{!obj.Sequence}" iconName="utility:add" onclick="{!c.addRow}" size="x-small"/>
            </td>
         </tr>
     </aura:iteration>
   </tbody>
</table>
------
addRow : function (component,event,helper){
      var a = event.getSource().getLocalId();
      console.log('a '+a); //THIS RETURNS --> a {!obj.Sequence} 
}
-----

 
Best Answer chosen by Saurabh Kulkarni 84
vijay kumar kvijay kumar k
Hi Saurabh

you can use dirctly like 

var a = event.getSource().get("v.title");
  console.log('a '+a);///Retun title value

The above mentioned target keyword will work HTML tags. 

Regards
Vijay

All Answers

vijay kumar kvijay kumar k
Hi Saurabh Kulkarni 84

As per the documents in aura iteration aura:id wont give dynamic id values. So we cann't get dynamic id in this case.
I recomended to insted of using aura:id use any another attribute and get it into js. 

Ex: I'm using title here.

<lightning:buttonIcon title="{!obj.Sequence}" iconName="utility:add" onclick="{!c.addRow}" size="x-small"/>
addRow : function (component,event,helper){
     var a = event.target.getAttribute("title");
  console.log('a '+a); 
}
try this if it's not helpful to you let me know.

Regards 
Vijay
Saurabh Kulkarni 84Saurabh Kulkarni 84
Thanks Vijay for your response.

It's good to know the reason why it was not working.

I tried the way you mentioned, but it still does not work. Now the console log output is --> a null

can you please let me know other way?

Also, I noticed that when I use html elements inside iteration, they do not support onclick method call. Is this intentional again?

Thanks,
Saurabh
 
vijay kumar kvijay kumar k
Hi Saurabh

you can use dirctly like 

var a = event.getSource().get("v.title");
  console.log('a '+a);///Retun title value

The above mentioned target keyword will work HTML tags. 

Regards
Vijay
This was selected as the best answer
Maichal ChalMaichal Chal
Aura:iteration has an attribute called as indexVar, why not use it? if vacancies.indexOf(vacancy) returns -1 means that the javascript didn't found the key on the array may be check if you should have vacancy.id instead of vacancy.Id... i did same for https://rochesterlawcenter.com/
Also from Event docs:
In the client-side controller, you can use one of the following methods to find out which button was clicked.

event.getSource().getLocalId() returns the aura:id of the clicked button.

event.getSource().get("v.name") returns the name of the clicked button.
Markup
aura:iteration items="{!v.vacancies}" var="vacancy" indexVar="index" >
    <span class="spanButtonClose">
        <lightning:buttonIcon name="{!index}" iconName="utility:close" onclick="{!c.close}"/>
    </span>
</aura:iteration>
JS Code:
close : function(component, event, helper) {
    let vacancies = component.get("v.vacancies");  //an array
    let toDeletIndex =  event.getSource().get("v.name");
    console.log(toDeletIndex );


    vacancies.splice(toDeletIndex, 1);        
    component.set("v.vacancies", vacancies);
},

 
Saurabh Kulkarni 84Saurabh Kulkarni 84
Hi Maichal,

I had a JSON object stored in an object field which contains the sequence number. This sequence number I wanted to fetch when a row was actioned.

Regards,
Saurabh Kulkarni
David Roberts 4David Roberts 4
Hi Maichal,
Thanks for that solution.
I can't believe how difficult it has been to get the data from a table's row.
I must be missing something.
However, your index solution has allowed me to move forward.
I'll finish my code next week and post the result.
 
David Roberts 4David Roberts 4
Sorry All! forgot I'd promised this.
Had to search for the solution again myself and came across Maichal's again.
So, I hope this helps others understand what is required:-

In your controller, you want to get the index of the iteration when the change method is fired from the input.
Use the "name" or "title" attribute on the input method and invent a variable such as 'idx' to populate it..
 
<lightning:input name="{!idx}" ...

The value of 'idx' has to come from the interation's indexVar.
<aura:iteration items="{!v.myItems}" indexVar="idx" ...

Now the component's onchange can retrieve and use the index value.
 
var index = event.getSource().get("v.name");
console.log('index to use on items array = '+index);
var arrayOfItems = [];
arrayOfItems = cmp.get("v.myItems");
var changedItem = arrayOfItems [index];