Lightning JS - Why isn't JS filter and map functions working?

Question

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.

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

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>     

Answer 1

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)
        );
    }
})