How to access the iterable value from component dual list box in the javascript controller?

Question

I have an iterable component that looks like this:

<aura:iteration items="{!v.cartLineItems}" var="cartItem" indexVar="index">
    <tr aura:id="cartTableRow" id="{!index}">

        <td class="productName">
            <ui:outputText value="{!cartItem.productName}"/>
        </td>

        <td>
            <lightning:dualListbox class="darkText" name="languages"                  
            sourceLabel="Available"
            selectedLabel="Selected"
            options="{!v.options}"
            onchange="{!c.handleChange}"
            />
        </td>

    </tr>
    <lightning:input aura:id="hiddenInput" value="{!cartItem}" class="slds-hidden hiddenInput" />
</aura:iteration>

cartItem has a property productCode. I want to pass this property back to my controller and into handleChange. How can I do this?

handleChange: function(component, event) {
        var selectedOptionValue = event.getParam("value");    
    },

Can I do something like this in my component:

<aura:iteration items="{!v.cartLineItems}" var="cartItem" indexVar="index">
        <tr aura:id="cartTableRow" id="{!index}">

        <td class="productName">
            <ui:outputText value="{!cartItem.productName}"/>
        </td>

        <td>
            <lightning:dualListbox class="darkText" name="languages"                  
            sourceLabel="Available"
            selectedLabel="Selected"
            options="{!v.options}"
            onchange="{!c.handleChange}"
            cartItem="{!cartItem}"
            />
        </td>

    </tr>
    <lightning:input aura:id="hiddenInput" value="{!cartItem}" class="slds-hidden hiddenInput" />
</aura:iteration>

And something like this in my controller:

handleChange: function(component, event) {
        var selectedOptionValue = event.getParam("value");
        var cartItem = event.getParam("cartItem");  
    },

Answer 1

You can't set attribute like that in Aura. The attribute has to exist on the component to avoid compiler errors. The solution is to put some sort of identifier on a wrapping element; you've basically already got that part, you just need to go grab it:

<tr aura:id="cartTableRow" data-index="{!index}">

Note that id should never be used by a developer, because they can, and will, be mutated in order to be unique. Instead, we use a dataset attribute.

---

handleChange: function(component, event) {
  var index = event.target.closest("[data-index]").dataset.index;
  var items = component.get("v.cartLineItems");
  var cartItem = items[index];
  ...