[SalesForce] How to pass the object being iterated to JS controller

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.

Best Answer

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);
}
Related Topic