0

I am getting the data from the apex but it has many arrays and i am iterating only required fields i.e task.fields. this field contain Id of the task. when user clicks on delete button i need to get the particular task Id to delete the task. How I can get the selected task ID from below code snippet. I have used aura:Set to set the task object and tried to access it from Js file but its not working. Any leads to solve this issue. Thanks in advance.

<aura:attribute name="data" type="Object" access="private" description="Data for Tasks"/>
 <aura:attribute name="taskObj" type="Object" description="Filter Tasks for current User"/>

    <aura:iteration items="{!v.data.tasksByCategories}" var="category">
        <aura:iteration items="{!category.tasks}" var="task" end="{!v.taskLimit}">
               <li class="slds-border_bottom slds-p-around--small">
                  <ul class="slds-list_vertical slds-wrap">
                       <aura:iteration items="{!task.fields}" var="field" indexVar="index">
                          <li>
                              c:DynamicOutput field="{!field}"/>
                          </li>
                        </aura:iteration>
                           </ul>
                   // set the task obj to attribute to get the id from js file
                              <aura:set attribute="taskObj" value="{!task}"> </aura:set>
                          <div class="delete-button">
                            <lightning:icon iconName="action:delete" onclick="{!c.deleteTask}" />
                           </div>
                          </li>
        </aura:iteration>
        </aura:iteration>

Js file.

 deleteTask: function(component, event, helper) {
        var taskObj = component.get("v.taskObj");
        console.log(taskObj);
  }

1 Answer 1

2

You can put the assign the id as data-attribute to div and put the onclick on div like this

 <div class="delete-button" data-row="{field.Id}" onclick="{!c.deleteTask}" style="display: inline-block;">
    <lightning:icon iconName="action:delete"  />
 </div>

and in js you can get the id like this

  var selectedItem = event.currentTarget;
  var recId = selectedItem.dataset.row;
  console.log(recId)
5
  • Thanks for the lead, its working after some changes. can you give me some link to know more about data-row.
    – Adam lee
    May 19, 2020 at 10:47
  • @Adamlee this is standard html feature you can look more about data attributes here developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…
    – User6670
    May 19, 2020 at 10:50
  • @Adamlee though there are multiple ways of how you get this data-* attributes in aura controller
    – User6670
    May 19, 2020 at 10:53
  • Thanks, This icon is coming below of the task fields but i want to display it on next to fields. i have tried multiple ways but none of its working. Could you please help on it.
    – Adam lee
    May 19, 2020 at 10:57
  • @Adamlee it would be hard to tell without seeing where is it coming and where do you want but if you want it on same <li> tag you can try placing delete button <div> inside <li>
    – User6670
    May 19, 2020 at 11:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .