Hi All

Im doing Aura Components Specialist Superbadge. Im not able to see the boat in my page. Im new to aura components.

Please look at the code and suggest me.

BoatSearchResults.cmp

<aura:component controller="BoatSearchResults" Implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="boats" type="Boat__c[]"/> 
    <aura:method name="search" action="{!c.search}">
        <aura:attribute name="boatTypeId" type="String"/>
    </aura:method>
    <aura:attribute name="boatTypeId" type="String"/>
    <div class='slds-m-around_medium'>
        <lightning:layout horizontalAlign="center" verticalAlign="center" multipleRows='true'>

            <aura:if isTrue="{!v.boats.length > 0}">
                <aura:iteration items="{!v.boats}" var="bot">
                    <lightning:layoutItem flexibility="grow" class="slds-m-around_small">
                        <c:BoatTile boat="{!bot}" />
                    </lightning:layoutItem>
                </aura:iteration>
                <aura:set attribute="else">
                    <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
                        <ui:outputText value="No boats found" />
                    </lightning:layoutItem>
                </aura:set>
            </aura:if> 
        </lightning:layout>
    </div>
</aura:component>

BoatSearchResultsController.js

({
    search: function(component, event, helper){ 
        var params = event.getParam('arguments'); 
        var arg = component.get('c.doSearch');
        $A.enqueueAction(arg); 
    }, 
    doSearch : function (component, event, helper){ 
        helper.onSearch(component); 
    },
})

BoatSearchResultsHelper.js

({
    onSearch : function(component, event) {
        var boatTypId = component.get("v.boatTypeId");
        alert(boatTypId);
        var action = component.get("c.getBoats");
        action.setParams({boatTypeId:boatTypId});

        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var res = response.getReturnValue();
                component.set("v.boats", res);
            }
            else{
                console.log("Failed with state: " + state);   
            }
        });

        $A.enqueueAction(action);
    },
})

Thanks in advance
Sameena S