Salesforce Lightning Event's attribute showing undefined

Question

I am Doing Lightning Super Badge,but stuck atone place.

Following is the code snippet.

BoatTile.cmp

<lightning:button class ="{!v.selected=='true' ? 'tile selected':'tile'}" onclick ="{!c.onBoatClick}">
    <div style="{!'background-image:url(\''+v.boat.Picture__c+'\')'}" class="innertile">
        <div class="lower-third">
            <h1 class="slds-truncate">"{!v.boat.Contact__r.Name}"</h1>
        </div>
    </div>

</lightning:button>

BoatTile.ctrl

({
    onBoatClick : function(component, event, helper) {
        debugger;
        var BoatClick = component.getEvent("boatSelect");
        //var boatId = event.getSource().get("v.name");
        var boatId = component.get("v.boat").Id;  //here id value is present
        BoatClick.setParam({
            "boatId" : boatId
        });
        BoatClick.fire();

    }
})

BoatSelect.evt

<aura:event type="COMPONENT" description="Boat Event" access = "global">
<aura:attribute name ="boatId" type ="ID" />
</aura:event>

BoatSearchResults.cmp

<aura:component controller="BoatSearchResults" access ="global">
    <aura:attribute name = "boats" type = "Boat__c[]"/>
     <aura:attribute name = "boatTypeId" type = "ID"></aura:attribute>
    <aura:attribute name = "selectedBoatId"  type = "ID"/>
    <aura:handler name = "boatSelect" event = "c:BoatSelect" action = "{!c.onBoatSelect}"/>
     <aura:handler name="init" value = "{!this}" action="{!c.doInit}"/>
    <aura:method  name= "search" action = "{!c.doSearch}" Description = "This is called from BoatSearch Component" access="PUBLIC">
        <aura:attribute name = "boatTypId" type ="ID"></aura:attribute>
     </aura:method>
   <lightning:layout horizontalAlign="space" multipleRows = "true">
     <aura:iteration items ="{!v.boats}" var ="boat">  
         <lightning:layoutItem size = "3" flexibility = "grow">
            <c:BoatTile boat="{!boat}" selected ="{!boat.Id == v.selectedBoatId ? 'true':'false'}"/>  
         </lightning:layoutItem>    
    </aura:iteration>
       <aura:if isTrue = "{!v.boats.length==0}">
       <lightning:layoutItem class = "slds-align_absolute-center" padding = "around-small">
        <ui:outputText value = "No boats founds">     
        </ui:outputText>
       </lightning:layoutItem>
       </aura:if>    
   </lightning:layout>
</aura:component>

BoatSearchResultsController.js

({
    doInit : function(component, event, helper) {
        console.log('inside init');
        helper.onSearch(component);
    },

    doSearch : function(component, event, helper) {
        console.log('insidedoSearch');
        var params = event.getParam('arguments');
        component.set("v.boatTypeId",params.boatTypId);
        helper.onSearch(component);
    },
    onBoatSelect : function(component, event, helper) {
        console.log("event is");
        console.log(event.getParam("boatId"));
        var BoatId = event.getParam("boatId");  // Here boatId is undefined
        debugger;                               //(Why?)
        component.set("v.selectedBoatId",BoatId);
        console.log("slected value"+component.get("v.selectedBoatId"));

    },

})

I am not getting the BoatId attribute's value of event in BoatSearchResultsController.js.However it is being passed from BoatTile.ctrl as I checked on console. Also, in console it is showing , boatId is undefined.

Please help,although I have complete the corresponding challenge,but It is not working as expected.

Answer 1

Issue is in your BoatTile controller. When you set params at the point of firing the event, you need to set it as an id not an object type.

Example,

({
    onBoatClick : function(component, event, helper) {
        var BoatClick = component.getEvent("boatSelect");
        var boatId = component.get("v.boat").Id;  
        BoatClick.setParam("boatId" ,boatId);
        BoatClick.fire();
    }
})