1

I am trying to find the value of a div which is inside aura iteration on icon click which is also inside the same aura iteration. Here in this code below I am trying to find the value of the aura:id=streeAddress on the click of the icon below.

<aura:iteration items="{! v.filteredMduInfo }" var="mdu">
    <div>
        <div>
            <div aura:id="streetAddress">{!
                mdu.address.Name+', '+mdu.address.sumchans__city__c+'
                '+mdu.address.sumchans__provinceCode__c+' '+mdu.address.sumchans__postalCode__c }</div>
        </div>
        <div>                    
            <lightning:icon iconName="utility:desktop" alternativeText="Television"
                            size="small" onclick="{! c.tvIconClick }"/>
        </div>
    </div>              
</aura:iteration> 

Controller JS:

tvIconClick : function(component, event, helper) {
    console.log(component.find("streetAddress").get());        
},
2
  • Your code has an extra </div> and is missing several closing elements near the end; this code would not compile as is. If it were nested correctly. As such, I'm not sure how we can help you as is. Would you please edit your code so that it is structurally correct? That will affect the answer you'd receive, as there are several possible solutions available.
    – sfdcfox
    Jan 3 '19 at 22:10
  • @sfdcfox I got the original post edited based on your request. Plz advise!
    – sumchans
    Jan 3 '19 at 22:32
0

You cannot directly do this with the information you get in the event handler as is. Instead, you can use the index or record Id to find the value.

<aura:iteration items="{! v.filteredMduInfo }" var="mdu" indexVar="mduIndex">
    <div data-record-id="{!v.mdu.Id}" data-index="{!mduIndex}">
        <div>
            <div aura:id="streetAddress">{!
                mdu.address.Name+', '+mdu.address.sumchans__city__c+'
                '+mdu.address.sumchans__provinceCode__c+' '+mdu.address.sumchans__postalCode__c }</div>
        </div>
        <div>                    
            <lightning:icon iconName="utility:desktop" alternativeText="Television"
                            size="small" onclick="{! c.tvIconClick }"/>
        </div>
    </div>              
</aura:iteration>

tvIconClick : function(component, event, helper) {
  var filteredMdu = component.get("v.filteredMduInfo"),
      wrapper = event.target.closest("[data-record-id]"); // or [data-index]
  // option 1
  console.log(filteredMdu.find(mdu => mdu.Id === wrapper.dataset.recordId));
  // option 2
  console.log(filteredMdu[parseInt(wrapper.dataset.index)]);
},

Either way, these would be appropriate methods for finding the correct record to work with.

2
  • Thanks @sfdcfox. Got the code copied exactly the way you posted here. It didn't seem to work for me.
    – sumchans
    Jan 4 '19 at 0:43
  • I was able to figure it out this way, I added a title attribute with the id value to lightning:icon. Got the value on the controller using the event.getSource().
    – sumchans
    Jan 4 '19 at 1:14

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.