How To Get Record Id From aura:iteration In Lightning Component

Fetch Selected Record Id From Iteration Lightning Aura Component:

If we need to fetch record id or some element from aura:iteration we can use html property dataset. By using this html dataset attributes we can pass id from component to JavaScript function when some event occurs. The name of a custom data element starts with data-. By using html elements, we can get not only id but we can get any element that we set for data element (ex: data-id, data-name) in lightning component.

Example code for fetching record id in aura iteration:

In below example we are fetching all the student records, In aura iteration  for div element we added data-id ="{!student.Id}". on click on student we are passing selected student id to JavaScript function handleSelect by using event.target.dataset.id. If we need to pass other attribute then we can create new data attribute, for example if we need to pass name of selected student then we add new attribute data-name and in js function we can get that attribute by using event.target.dataset.name.

StudentController.cls

 public class StudentController {  
   @AuraEnabled  
   public static List<Student__c> getStudentList() {  
     List<Student__c> studentList = [SELECT Id, Name FROM Student__c];  
     return studentList;  
   }  
 }  

StudentList.cmp

 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,  
               flexipage:availableForRecordHome,force:hasRecordId,  
               force:lightningQuickAction" controller="StudentController"  
         access="global" >  
   <aura:attribute name="studentList" type="List" />  
   <aura:handler name="init" action="{!c.fetchStudentList}" value="{!this}" />  
   <aura:iteration items="{!v.studentList}" var="student">  
     <div data-id ="{!student.Id}" class="slds-box slds-theme_shade" onclick="{!c.handleSelect}">  
       {!student.Name}  
     </div>  
   </aura:iteration>  
 </aura:component>  

StudentListController.js

 ({  
   fetchStudentList : function(component, event, helper) {  
     var action = component.get("c.getStudentList");  
     action.setCallback(this, function(response) {  
       var state = response.getState();  
       if(state === 'SUCCESS') {  
         var studentList = response.getReturnValue();  
         component.set("v.studentList",studentList);  
       }  
       else {  
         alert('Error in getting data');  
       }  
     });  
     $A.enqueueAction(action);  
   },  
   handleSelect: function(component, event, helper) {  
     var selectedId = event.target.dataset.id;  
     alert(selectedId)  
   }  
 })  

Output:

Subjects:

Lightning Component Basics Lightning Components

Share This: