[SalesForce] Passing iteration variable to clientside controller

I am trying to pass an iteration variable into my client side controller (I know there are a number of posts on this but haven't found any that work).

I've found some resources online that set iteration variables as a div id… for example: 

    <aura:iteration items="{!v.newCases}" var="case">  
      <button type="button" onclick="{!c.showCaseDeleteModal}" id={!case.Id}>Delete</button> 
     </aura:iteration>

found at https://developer.salesforce.com/forums/?id=906F0000000kAn0IAE

However, this hasn't worked. Here is my code(iteration var is in quotes… both did not worked):

aura: 

          <aura:iteration items="{!v.car_list}" var="car" indexVar="i">
              <div id="{!car.id}" class="expand-btn" onclick="{!c.expand}">
                <lightning:icon iconName="utility:threedots" size="x-small"  alternativeText="expand" />
              </div>
          </aura:iteration>

js:

expand: function(component, event, helper){
    var id = event.target.id;
    console.log('car_id', id);
    var div = document.getElementById('foo');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
}
})

The only thing logged is 'car_id'.

Best Answer

I figured out the issue. The above logic would work fine , however, using lightning:icon caused event.target to point to all of the stuff under the hood of this aura feature.

So in order to get around this I had to traverse up the dom to find the id that I wanted to access. Here is my updated code:

aura: 

    <aura:iteration items="{!v.car_list}" var="car" indexVar="i">
            <li data-car-id="{!car.id}" class="car-element slds-item">
                  <div class="expand-btn" onclick="{!c.expand}">
                      <lightning:icon iconName="utility:threedots" size="x-small"  alternativeText="expand" />
                  </div>
            </li>
      </aura:iteration>

expand.js:

expand: function(component, event, helper){
    var car_element = event.target
    while (car_element.dataset.carId === undefined && car_element.parentNode !== undefined){
        car_element = car_element.parentNode;
    }
    var car_id = car_element.dataset.carId;
    var comment_panel_element = car_element.getElementsByClassName('comment-panel')[0];

    if (comment_panel_element.style.display !== 'none') {
        comment_panel_element.style.display = 'none';
    }
    else {
        comment_panel_element.style.display = 'block';
    }
}
Related Topic