I have been looking for a way to pass a parameter from a Lightning component's aura:iteration to a javascript controller. I have searched for a solution but have not been able to find one for Aura, only for Visualforce. Surely the authors of Aura have considered something as basic as passing parameters from html, so what am I missing? The code below is what I would expect to work, but doesn't. Thanks for your help.

Inside my component

<aura:attribute name="monkeys" type="List" />

<aura:iteration items="{!v.monkeys}" var="monkey">
    <span onclick="{!c.getMonkeyLove({!monkey.love})}">{!monkey.love}</span>

Inside my controller

getMonkeyLove : function (component, event, helper, data) {
    console.log(data); //Bananas
  • 1
    Have you been through the Trailhead Lightning Component Module? If not, I highly recommend it and think it will teach you what you need to learn.
    – crmprogdev
    Commented May 6, 2016 at 13:40
  • Thanks for the reply! Took a look and it makes sense, even though it's not very elegant. At some point I would like to pass back a value done in a aura:iteration, though. How could you find the correct aura:id, get its value, and then pass it back to the controller? All the aura:id's will be iterated with the same name, so this solution won't work as far as I can tell. I don't see anything about this issue in the docs. Any ideas? Thanks. Commented May 6, 2016 at 16:02
  • Presumably just like you do now with visualforce. At some point, you do a selection and pass the selected value back through your helper method, (perhaps via an event handler) to your controller. You may need more than one component to achieve what you want to accomplish. Or, you may need additional helpers and/or a more complex client-side controller. I can't give you a definitive solution to your problem since I don't know exactly what you want to do, but that's the general scenario.
    – crmprogdev
    Commented May 6, 2016 at 16:30

2 Answers 2


You can add data-* attributes to span like this:

 <span data-love="{!monkey.love}" onclick="{!c.getMonkeyLove}">{!monkey.love}</span>

In controller:

  getMonkeyLove: function(cmp,event,helper){
    var monkeyLove = event.getSource().getElement().getAttribute('data-love');

Finally I found the solution.

You must add a data-XXXX DOM attribute for each paramter you have to add.

Then, to retrieve it in the controller :



Lightning Component

<aura:iteration items="{! currentWeek.DaysInWeek}" var="currentDay">
   <li class="day" onclick="{! c.showEventCreation}" data-year="{!v.month.Year}" data-month="{!v.month.Month}" data-day="{! currentDay.Day}" >
      <div class="date">{! currentDay.Day}</div>                       

JS Controller

    intYear = objEvent.currentTarget.dataset.year;
    intMonth = objEvent.currentTarget.dataset.month;
    intDay = objEvent.currentTarget.dataset.day;

You must log in to answer this question.

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