1

I am using the aura:iteration tag to dynamically generate a list of contacts. In that list of contacts is the contact Id that I need to pass to the controller. I am storing that contact Id in an element tag using data-id. I have passed the id to the controller and used console.log to show what is being passed. The issue is that it is only storing the id from the first li item.

Component:

<ul>
<aura:iteration items="{!v.contacts}" var="contact" indexVar="studentNo">
    <li class="minli">
        <div class="studentPhotoDiv"><ui:outputRichText value="{!contact.Photo__c}" class="studentPhoto"/></div>
        <div class="studentNameDiv"><ui:outputText value="{!contact.Name}" class="studentName" aura:id="studentName"></ui:outputText></div>
        <a data-index="{!studentNo}" data-id="{!contact.Id}" id="studentIdElement"/>
        <div class="studentSelectDiv"><ui:button label="Check-in" class="studentSelect" press="{!c.studentSelect}"></ui:button></div>
        <br style="clear: both;" />
    </li>
</aura:iteration>
</ul>

Client-Side Controller:

studentSelect : function(component,event,helper) {
    var element = document.getElementById('studentIdElement');
    var studentId = element.dataset.id;
    console.log("Student ID: "+studentId);
}

The id's are dynamically generated and I have confirmed that they are all different but it still is only passing the id of the first li item.

  • 1
    The document.getElementById() method can only return one element. Ids are supposed to be unique. – Martin Lezer Jul 21 '17 at 15:09
  • Oh I understand what you're saying. Is there anything else I can use to return the list elements dynamically? – Jacolby Hartson Jul 21 '17 at 15:11
3

The document.getElementById() method can only return one element. Ids are supposed to be unique.

You should use a class instead. In your HTML, declare your links like this:

<a data-index="{!studentNo}" data-id="{!contact.Id}" class="studentElement"/>

Then, in your Javascript, you'll be able to get a list of elements using:

var elements = document.getElementsByClassName('studentElement');

Finally, don't forget that your new variable is an array. You can loop through each element to get the dataset id:

Array.prototype.forEach.call(elements, function(studentElement) {
      var studentId = studentElement.dataset.id;
      console.log("Student ID: "+studentId);
});
  • I'm not sure how to use the last function? Can I use that function inside of my studentSelect function that I have already created? – Jacolby Hartson Jul 21 '17 at 15:22
  • Yes this is replacing the code inside your studentSelect function. – Martin Lezer Jul 21 '17 at 15:23
  • I am getting an error saying that elements.forEach is not a function `var elements = document.getElementsByClassName('studentElement'); elements.forEach(function(studentElement) { var studentId = studentElement.dataset.id; console.log("Student ID: "+studentId); });' – Jacolby Hartson Jul 21 '17 at 15:33
  • I understand what it is trying to do, but I'm not sure why I'm getting the error now, unless I am using the function wrong – Jacolby Hartson Jul 21 '17 at 15:34
  • Sorry my bad. I updated my code. – Martin Lezer Jul 21 '17 at 15:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.