Display one item (taken from a list created by aura:Iteration) within an alert() [duplicate]

Question

I have a list of cases and a related button for each case. Once I hit the button, I want to see an alert with all the details of the case. I've tried multiple solution but i can't reference the x item of the list in order to reference his fields within the alert() funct.

Here's my code from the component:

<aura:component controller="ManageCaseController" description="ManageCase"
            implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome">
<aura:attribute name="recordId" type="Id"/>
<aura:attribute name="filteredCases" type="Case[]"/>
<aura:attribute name="columns" type="List"/>
<aura:attribute name="UpdatedList" type="Case[]"/>
<aura:attribute name="ContactsList" type="List"/>
<aura:attribute name="CaseLists" type="List"/>
<aura:attribute name="key" type="String"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:input type="text" name="searchKey" label="Enter" aura:id="searchKey" onchange="{!c.searchKeyChange}"
                 placeholder="Search"/>
<table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
    <thead>
    <tr class="slds-text-heading_label">
        <th scope="col">
            <div class="slds-truncate" title="Subject">Subject</div>
        </th>
        <th scope="col">
            <div class="slds-truncate" title="Related Contact">Contact</div>
        </th>
        <th scope="col">
            <div class="slds-truncate" title="Case Comment">Case Comment</div>
        </th>
        <th scope="col">
            <div class="slds-truncate" title="Case Details">Case Details</div>
        </th>
        <th scope="col">
            <div class="slds-truncate" title="My Cases">
                <lightning:button label="My Cases" name="MyCases" onclick="{!c.changeListCases}"/>
            </div>
        </th>
    </tr>
    </thead>
    <tbody>
        <aura:iteration items="{!v.CaseLists}" var="case" indexVar="index">
        <tr>
            <td>
                <div class="slds-truncate" id="subject" title="{!case.Subject}">{!case.Subject}</div>
            </td>
            <td>
                <div class="slds-truncate" id="contactName" title="{!case.Contact.Name}">{!case.Contact.Name}</div>
            </td>
            <td>
                <div class="slds-truncate" id="caseOwner">
                    <lightning:recordEditForm recordId="{!case.Id}" objectApiName="Case">
                        <lightning:inputField
                                fieldName="Comments">
                        </lightning:inputField>
                        <lightning:button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update"/>
                    </lightning:recordEditForm>
                    </div>
            </td>
            <td>
                <div class="slds-truncate">
                    <lightning:button name="Details" label="Details"  aura:id="link" onclick="{!c.handleClick}" /> //This button should trigger the alert()
                </div>
            </td>
        </tr>
    </aura:iteration>
    </tbody>
</table>

Method from the js controller:

                handleClick : function (cmp, event, helper) {
                var oppId = event.getParam("recordId");
                var selectedItemsNew = component.find('link').getElements();
                alert('This is the case subject: ' + selectedItemNew.Subject + 'This is the related contact: ' +selectedItemNew.Contact.Name);
                }

Does anyone have any suggestions? Thanks in advance for your help.

Answer 1

you need to pass the record id to the button attributes, either custom or not

<lightning:button name="<RecordId Here>" label="Details" aura:id="link" onclick="{!c.handleClick}" />

and get the value on click:

event.getSource().get("v.name")

above, I used name, but you can also use value, or a custom attribute.