How to pass the object being iterated to JS controller

Question

I'm iterating over a list of Stores(Account) to display all the Stores assigned to an individuals. What I want to achieve is, from the list of Stores if one of list items (Store) is clicked/touched, it should display the details of that account. I have an Array of Store(Account) as an attribute in the component I'm iterating in.

<aura:attribute name="stores" type="Account[]"/>  
<aura:iteration items="{!v.stores}" var="store">
    <c:IndirectStoreCard store="{!store}"/>
</aura:iteration>

As you can see, I have created nested component(c:IndirectStoreCard) which encapsulate all the details of a store. My question is, how do I pass, the selected record i.e.Store to the JS controller. I know how to pass one of the fields (say, Id) to controller using anchor tag, but that would required me to query the other fields from the database and I don't want another database trip, simply because I already have all the data.So, I want pass the entire record.

Answer 1

When the nested component(c:IndirectStoreCard) is clicked, it fires a component event with a parameter(the selected record).

IndirectStoreCard.cmp:

<aura:attribute name="store" type="Account" />
<aura:registerEvent name="onClick" type="c:messageEvt" />
<div style="cursor:pointer;" onclick="{!c.clickStore}">
  <p>{!v.store.Name}</p>
</div>

IndirectStoreCardController.js:

clickStore: function(component, event, helper) {
  var cmpEvt = component.getEvent("onClick");
  cmpEvt.setParams({
    "store": component.get("v.store")
  }).fire();
}

Then the parent component is

<aura:attribute name="stores" type="Account[]"/>  
<aura:iteration items="{!v.stores}" var="store">
  <c:IndirectStoreCard store="{!store}" onClick="{!c.clickStore}" />
</aura:iteration>

JS controller:

clickStore: function(component, event, helper) {
  var store = event.getParam("store");
  console.log(store);
}

Answer 2

I figured another way to achieve this. There is no need to create a child component:

    <aura:attribute name="stores" type="Account[]"/> 
    <aura:iteration items="{!v.stores}" var="store" indexVar="idx">
    <div class="slds-card"  data-record="{!idx}"  onclick="{!c.goToStoreDetail}">
        <header class="slds-card__header slds-grid grid--flex-spread">    
            <h2 class="slds-text-heading--medium slds-truncate">{!store.Name}</h2>
        </header>            
    </div>                                                
</aura:iteration>

As you can see, I have used indexVar attribute in the iteration. I then use the index values in the data attribute of Div. Now in the JS Controller you can use the following code to retrieve the record based on the index.

     var selectedItem = event.currentTarget; // Get the target object
     var index = selectedItem.dataset.record; // Get its value i.e. the index
     var selectedStore = component.get("v.stores")[index]; // Use it retrieve the store record 

Use console.log to verify the results.

Answer 3

Please check below link whether it is useful

How to Navigate to the record/get the record id in <Aura:iteration>

If you still have problem, provide snippet of your code