Input field not getting populated when selecting multiple records in a table as aura:id does not support dynamic id

Question

I have a component which will display a list of records in the table format, and here I have a pick-list input field named Distance . Now on entering value in distance field and saving the record, record gets saved but the distance value is not getting populated in the record. If there is only one record, on entering distance value it will get saved and be populated. But when it handles more than one record, since aura:id inside aura:iteration is static , it throws an error component.get() is not a function.Since aura:id does not support dynamic id’s, I couldn’t get this done.

 Component:

<aura:attribute name="diss" type="String"/>
<aura:attribute name="distanceval" type="String"/>//This value is fetched from Server side Controller.

<aura:if isTrue="{!v.LocationFound}">   
                <aura:iteration items="{!v.Location}" var="location" >
                    <tr> 
                        <th>
                            <label class="slds-checkbox">
                                <ui:inputCheckbox aura:id="checkLocation" value="" text="{!location.Id}"/>
                                <span class="slds-checkbox--faux" />
                                <span class="slds-form-element__label"></span>
                            </label>
                        </th>
                        <th scope="row">
                            <div class="slds-truncate" title="Location Name">{!location.Name}</div>
                        </th>

    <div class="slds-truncate" title="Distance" >

         <lightning:select name="selectItem"  label="Distance to TrainingLocation" value="" aura:id="dis" >
         <option value=" " > --Select-- </option>
          <aura:iteration items="{!v.distancevalue}"  var="dist">
              <option value="{!dist.value}"> {!dist.label} </option>
            </aura:iteration>
            </lightning:select>
           </div>

    Helper.js:

    var distanceval=component.find('dis').get('v.value');
            console.log('the distance values is>>>>>'+distanceval);
             component.set("v.diss",distanceval);
            console.log('value is>>>>>'+component.get('v.diss'));

Answer 1

when you use component.find from Aura:iteration it gives array of components if that aura:iteration had more than one items, so you 'll to get list of distance values if aura:iteration had more than one item. you need to change the code to get list of distance values. try below code let me know if you get any issue.

helper.js

var lstdistanceval= [].concat(component.find("dis")).map(cmp => cmp.get("v.value"); // even it's working when you have single item in aura:iteration
        console.log('the distance values is>>>>>'+lstdistanceval); // here you 'll get list of distances you can tweek what ever you want

Answer 2

You can use lightning:datatable for this requirement. You can avoid using aura:iteration over html table element & relying on aura:id to get selected values. Base lightning datatable component will do all the things without much code.

.cmp:

<lightning:datatable columns="{! v.mycolumns }" data="{! v.mydata }" keyField="id" onrowaction="{! c.handleRowAction }" />

.js:

({ 
    init: function (cmp, event, helper) { 
          var actions = [
              { label: 'Show details', name: 'show_details' },
              { label: 'Delete', name: 'delete' }
           ]; 
          cmp.set('v.mycolumns', [
               // Other column data here 
               { type: 'action', typeAttributes: { rowActions:       actions, menuAlignment: 'left' 
              } } 
         ]); 
    }, 
  handleRowAction: function (cmp, event, helper) { 
      var action = event.getParam('action'); 

     var row = event.getParam('row');
    switch (action.name) { 
       case 'show_details':
             alert('Showing Details: ' + JSON.stringify(row)); 
             break;
       case 'delete': 
           var rows = cmp.get('v.mydata'); 
           var rowIndex = rows.indexOf(row);                
           rows.splice(rowIndex, 1);
           cmp.set('v.mydata', rows); break;
    } 
})

Please refer Creating Static Row-Level Actions

section under documentation tab on this linklightning datatable

Using a base lightning component allows you to do most of the basic tasks without much coding. Salesforce has already provided most of the basic functionalities in base components that helps you to avoid coding each and every functionality by yourself. Its a good practice to use provided base components instead of html elements and replicating the functionalities which are already available. If you have something that's not available in base component, then you should go for complete implementation.