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);
  }
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 '20 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 '20 at 10:50
  • @Adamlee though there are multiple ways of how you get this data-* attributes in aura controller – User6670 May 19 '20 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 '20 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 '20 at 11:02

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.