2

My prior question changed significantly from the original, so here is my main question now: Why is filter and map returning null (see helper)?

User clicks a button that kicks this off

transferButtonClick : function(component, event, helper) {
    helper.sendData(component, event, helper)
}

Helper - it currently returns null.

var ids = cmp.find("transferFromCheckbox").filter(checkbox => checkbox.checked).map(input => input.dataset.id);

This is the main Lightning line in question - it's within aura:iteration (iteration code below)

<input aura:id="transferFromCheckbox" type="checkbox" data-id="{!contract.id}"/>

This shows the selector is getting 2 elements in it's array. filter and/or map are returning null.

enter image description here

Here is what cmp.find("transferFromCheckbox") returns. Does this look right? enter image description here enter image description here

Full iteration code here

                <aura:iteration items="{!v.compositeWrapper.contracts}" var="contract" indexVar="index">
                <tr scope="row" style="height: 1.4rem;">
                    <td class="tableBodyFormat slds-truncate">{!index+1}</td>
                    <td class="tableBodyFormat slds-truncate">orderNumber</td>
                    <td class="tableBodyFormat slds-truncate">{!contract.contractType}</td>
                    <td class="tableBodyFormat slds-truncate">{!contract.startDay}</td>
                    <td class="tableBodyFormat slds-truncate">{!contract.endDay}</td>
                    <td class="tableBodyFormat slds-truncate">{!contract.creditsPurchased}</td>
                    <td class="tableBodyFormat slds-truncate">{!contract.creditsUsed}</td>
                    <td class="tableBodyFormat slds-truncate">{!contract.creditsTranferred}</td>
                    <td class="tableBodyFormat slds-truncate">{!contract.creditsExpired}</td>
                    <td class="tableBodyFormat slds-truncate">creditsRemaining</td>
                    <td class="tableBodyFormat slds-truncate">
                        <input aura:id="transferFromCheckbox" type="checkbox" data-id="{!contract.id}"/>
                    </td>
                    <td class="tableBodyFormat slds-truncate">
                        <input type="radio" id="{!contract.id}" name="transferToRadioButton" onclick="{!c.transferToCheckboxOnclick}"/>
                    </td>     
1
  • So, it's not null, it's an empty list. That's distinctly different. I'm going to write up a quick component to try and figure out what's up.
    – sfdcfox
    Mar 6, 2020 at 22:09

1 Answer 1

3

The results from SecureComponent.find are actually SecureComponent elements. To get the attributes of the underlying HTML element, you need to call getElement(). Here's an example of finding the selected items, and extracting their id values:

transferToCheckboxOnclick: function(component,event,helper) {
    component.set(
        "v.selected",
        component.find("transferFromCheckbox")
            .filter(box=>box.getElement().checked)
            .map(result=>result.getElement().dataset.id)
    );
}

demo.app

<aura:application extends="force:slds">
    <aura:attribute name="items" type="List" default="[]" />
    <aura:attribute name="selected" type="List" default="[]" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <table>
        <aura:iteration items="{!v.items}" var="contract" indexVar="index">
            <tr scope="row" style="height: 1.4rem;">
                <td class="tableBodyFormat slds-truncate">{!index+1}</td>
                <td class="tableBodyFormat slds-truncate">
                    <input aura:id="transferFromCheckbox" type="checkbox" data-id="{!contract.id}"/>
                </td>
                <td class="tableBodyFormat slds-truncate">
                    <input type="radio" name="transferToRadioButton" onclick="{!c.transferToCheckboxOnclick}"/>
                </td>  
            </tr>
        </aura:iteration>
    </table>
    Selected: {!join(',',v.selected)}
</aura:application>

demoController.js

({
    init: function(c,e,h) {
        c.set(
            "v.items",
            [1,2,3,4,5].map(value=>({id:value}))
        );
    },
    transferToCheckboxOnclick: function(component,event,helper) {
        component.set(
            "v.selected",
            component.find("transferFromCheckbox")
                .filter(box=>box.getElement().checked)
                .map(result=>result.getElement().dataset.id)
        );
    }
})
2
  • @RyanMcNeely Hmm, I literally copied that from a working demo in my dev org. I can copy-paste what I've done here for your persual.
    – sfdcfox
    Mar 6, 2020 at 23:53
  • Thanks so much @sfdcfox ! Mar 9, 2020 at 17:31

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.