+ Start a Discussion
Sabarish Chandramouli 1Sabarish Chandramouli 1 

APEX Lightning Super Badge - Challenge 4 - Component.get("c.getBoats") is executing and pulling the list of records but the response is Error.

I am getting the Boat picklist vlaues from the "BoatSearchForm" component and passing it Boat Search Component as an event.

From the BoatSearchForm component, I am firing an event that is handled by the BoatSearch Component.

User-added image
 
<aura:component controller="boatTypeValues" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
 
 <aura:attribute name="boatTypeNames" type= "String[]"/>
    
 <aura:attribute name="boatTypeList" type = "BoatType__c[]"/>
    
 <aura:attribute name="showNew" type = "Boolean"/>
    
 <aura:attribute name ="carTypeSelect" type = "String"/>
    
 <aura:attribute name = "boatTypeID" type = "String"/>
    
 <aura:registerEvent name="formsubmit" type="c:formsubmit"/>
    
 <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
    
 <div>
     
    <lightning:layout horizontalAlign="center" class="slds-box slds-theme_default">
        
        <div>
        	
            <!--div class = " alignLeft">
        
         		<h1 class= "slds-text-align_left"> Find a Boat </h1>
         
     		</div-->
            
            <ul class="slds-list--horizontal">
            	
                <li>
                    <lightning:layoutItem padding="around-small">
                                       
                        <lightning:select class="select-auto-width moveTop" aura:id="select" name="selectType"  onchange ="{!c.newValueSelected}">
                            
                            <option value="All Types">All Types</option>
                            
                            	<aura:iteration items="{!v.boatTypeNames}" var="s">
                                    
                                    <option value="{!v.boatTypeID}" selected="{!v.boatTypeID}">{!s}</option>
                                    
                               </aura:iteration>
                        
                        </lightning:select>
                                        
                    </lightning:layoutItem>
                    
                </li>
                
                <li>
            
                    <lightning:layoutItem padding="around-small">
                        
                        <div>
                            
                            <lightning:button variant="brand" label="Search" title="Search" class="slds-m-left_x-small" onclick ="{!c.onFormSubmit}"></lightning:button>
                            
                        </div>
                        
                    </lightning:layoutItem>
                    
                </li>
                
                <li>
            
                    <lightning:layoutItem padding="around-small">
                        
                        <div>
                            
                            <aura:if isTrue = "{!v.showNew}">
                            
                                     <lightning:button variant="neutral" label="New" title="newRecord" class="slds-m-left_x-small" onclick ="{!c.creatNewRecord}"/>
                            
                            </aura:if>
                       </div>
                        
                    </lightning:layoutItem>
                    
                </li>
                
            </ul>
            
        </div>
    	
    </lightning:layout>
     
 </div>
    
</aura:component>

BoatSearchForm Controller:
 
({
      doInit : function(component, event, helper) {
        
        //To show the new button using Force:create record
       
        var newRecord = $A.get("e.force:createRecord");
          
        if(newRecord){
              
           component.set("V.showNew", true);    
              
        }
          
        else{
              
            component.set("V.showNew", false);  
        }
    
    	var pick = component.get("c.getPickListValuesIntoList");
 
    	pick.setCallback(this, function(response) {
    
            var state = response.getState();
    
            if(state === 'SUCCESS'){
    
                var listBoats= []; 
                
                listBoats = response.getReturnValue();
                
                console.log('The list of boats size is ' +JSON.stringify(listBoats));
                
                var listboatNames=[];
                
                for (var item in listBoats){
                    
                    //console.log(listBoats[item]);
                    
                    var boatName = listBoats[item].Name;
                    
                    console.log ('The boat name is  '+boatName);
                    
                    listboatNames.push(boatName);
                    
                    //console.log('The boat name is ' +listboatNames[3]);
                    
                }
                
                console.log('The list of boats names size is ' +listboatNames.length);
    
                component.set("v.boatTypeNames", listboatNames);
            }
 
 			 else if(state === 'ERROR'){

                console.log("Failed with state: " + state);
            }
        });
          
        $A.enqueueAction(pick);
          	  
    },
    
    
    creatNewRecord : function (component, event, helper){
        
        var createBoatRecord = $A.get("e.force:createRecord");
        
        //Get the picklist value selected by the user
        
        var pickListOption = component.find("select").get("v.value");
        
        createBoatRecord.setParams({
            
            "entityApiName":"Boat__c",
            "defaultfieldValues":{
                
                'Name':'Test Boat',
                'Contact__c' :'0036g00000AjiioAAB',
                'BoatType__c' :pickListOption
                
            }
        });
        
        createBoatRecord.fire();
        
    },
    
    newValueSelected : function(component, event, helper){
    
    var pickListValue = component.find('select').get('v.value');
    
	//var pickListValue = component.get("v.carTypeSelect");     
        
    component.set("v.carTypeSelect",pickListValue);
        
    console.log('Option selected is'+pickListValue);
    
	},
    
    
    onFormSubmit : function(component, event, helper){
        
        console.log('Inside  a onFormsubmit BoatSearchForm controller');
        
        //var boatTypeID = component.get("v.boatTypeID");
        
        var boatTypeID = component.find('select').get('v.value');
        
        //console.log('Boat Type Id is '+boatTypeID);
        
        var searchEvent = component.getEvent("formsubmit");
        
        searchEvent.setParams({"formData":boatTypeID});
        
        console.log('Fired the event ' +searchEvent);
       
        searchEvent.fire();
        
        console.log('Event fired');
                    
    }
})

BoatSearch Component:
 
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
    
    <aura:handler name="formsubmit" event="c:formsubmit" action ="{!c.onFormSubmit}"/>
    
    <article class="slds-card bottomMargin slds-m-bottom--medium">
        
  		<div class="slds-card__header slds-grid ">
        
        	<header title ="Find a Boat" class="slds-text-heading--small">Find a Boat</header>            
            
        </div>
        
        <div class="slds-card__body">
            
            <c:BoatSearchForm aura:id ="boatSearchFormID"/>
            
        </div>
        
    </article>
    
    <article class="slds-card bottomMargin">
        
      	<div class="slds-card__header slds-grid ">
        
        	<header title ="Matching Boats" class="slds-text-heading--small">Matching Boats</header>            
            
        </div>
        
        <div class="slds-card__body">
            
            <c:BoatSearchResults aura:id="boatSearchResID"/>
            
        </div>
        
    </article>
    
</aura:component>

BoatSearchForm Controller:
 
({
	onFormSubmit : function(component, event, helper) {
	
        var formData = event.getParam("formData");
        
        console.log('The form data Inside Boat Search Component is '+formData);
        
        //var boattypeID = formData.boatTypeId;
        
        //var boatTypeId = formData;
        
        console.log ('The boat type ID inside the BoatSearch controller is ' +formData);
        
        //Call the search function in boatSearchResults component
        
        var bsr = component.find("boatSearchResID");
        
        bsr.search(formData);
        
        //bsr.search(boattypeID);
    }

})


From the boatsearch component, I am calling an <Apex:method> inside BoatSearchResults componet which through the helper calls the  apex class - ​​​​​BoatSearchResults


BoatSearchResults component:
 
<aura:component controller="BoatSearchResults" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
	
    <aura:attribute name = "Boats" type ="Boat__c[]" access="GLOBAL"/>
    
    <aura:attribute name ="noResults" type = "Boolean"/>
    
    <aura:attribute name="boatTypeId" type = "String"/>
    
    <aura:method name="search" description="Sample method with parameter" action="{!c.doSearch}" access="public" >
        
        <aura:attribute name="boatTypeIdMethod" type="String"/>
        
    </aura:method>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <aura:if isTrue="{!v.noResults}">
    
    		<div class="slds-align_absolute-center  slds-text-heading_medium slds-text-color_error">
                
                <p>"No boats found"</p>
                
        	</div>
        
            <aura:set attribute="else">
               
               	<lightning:layout horizontalAlign="spread" multipleRows="true">
            
                    <aura:iteration items="{!v.Boats}" var="eachBoat">
                    
                        <lightning:layoutItem size="3">
                            
                            <c:BoatTile/>
                            
                        </lightning:layoutItem>
                        
                    </aura:iteration>
            
           		</lightning:layout>
    
            </aura:set>
            
    </aura:if>
    
    
    
</aura:component>

BoatSearchResults Controller:
 
({
	doSearch : function(component, event, helper)  {
        
        console.log('Inside BoatSearchResultsController');
        
        //var param = component.get("v.boatTypeId");
        
        var param = event.getParam("arguments");
        
        //console.log('The BoatSearchResults method arguments are ' +param);
        
         if(param){
                        
            var boatTypeIdLatest = param.boatTypeIdMethod;
             
            console.log('The boat type ID in BoatSearchResults  is '+boatTypeIdLatest);
             
            //var currentBoatID = component.get("v.boatTypeId");
            
            //component.get("v.boatTypeId");
            
            component.set("v.boatTypeId", boatTypeIdLatest);
             
            var updatedboatTypeID = component.get("v.boatTypeId");
             
            console.log('The updated boat type sent from BoatSearchResults controller to helper is '+boatTypeIdLatest);
                        
            helper.onSearch(component,updatedboatTypeID);
             
        }   
		
	},
    
    doInit : function(component, event, helper)  {
        
        
    }
    
})

BoatSearchResults Helper:
 
({
	onSearch : function(component,boatTypeId) {
        
        var finalboattype = boatTypeId;
        
        //component.get("v.boatTypeId"); 
        //component.set("v.boatTypeId",boatTypeId );
        
        console.log('Inside the BoatSearchResult helper and the boat type Id is '+finalboattype);
        
        //console.log('The action is' +component.get("c.getBoats"));
	
        var action = component.get("c.getBoats");
		
        action.setParams({
            //"boatTypeId" : finalboattype
          
            "boatTypeId": component.get("v.boatTypeId")
 
        });
        
        console.log('The action is ' +action);
        
        action.setCallback(this, function(response){

			console.log('The response is '+ JSON.stringify(response));
            
            var state = response.getState();
			//var state = "SUCCESS"
            
            console.log('The state is '+state);
        
            if (state === "SUCCESS"){
                
                console.log('Success');
                
                var boats = component.get("v.Boats");
                
                var responseOne = response.getReturnValue();
                
                console.log('The response list size is '+JSON.stringify(responseOne));
                
                //boats.push(response.getReturnValue()); 
                
                component.set("v.Boats", responseOne);
                
                console.log('The new Boat is '+component.get("v.Boats").length);
                
                /*var boats = component.get("v.Boats");
                                
                console.log('The response is '+response);
                
                boats.set(response.getReturnValue());                                
                
                component.set("v.Boats", boats);*/                
                                                
            }
            
            else if (state === "ERROR"){
                
                var errors = response.getError();
            	if (errors) {
                	if (errors[0] && errors[0].message) {
                    	console.log("Error message: " + 
                             errors[0].message);
               		 }
            	} else {
                console.log("Unknown error");
            }
                
                //$A.log("Errors", response.getError());
                //console.log('Not success' +response.getError());
            }
        
      	});
        
        $A.enqueueAction(action);
        console.log('Last part');
	},
})

The helper calls the apex class which is excuted but still throws an Error Response.

BoatSearchResults APEX Class:
 
public with sharing class BoatSearchResults {

 	@AuraEnabled
    public static List<Boat__c> getBoats(String boatTypeId){
        
        System.debug('The javascript boartsearchresults APEX called');
        
        String matchingID =  boatTypeId;
        
        System.debug('The matching ID in the APEX Class is ' +matchingID);
        
        List<Boat__c> matchingBoats = new List<Boat__c>();
        
        List<BoatType__c> matchingBoatIDList = new List<BoatType__c>();
      
        matchingBoatIDList = [Select Name, Id from BoatType__c where Name =:matchingID];
        
        System.debug('The size of matching list is '+matchingBoatIDList.size());
                
        if(matchingID != ''){
                        
            ID boatIdFin = matchingBoatIDList[0].Id ;
            
            System.debug('The matching boat ID hello is '+boatIdFin);
            
            matchingBoats = [Select  Name, BoatType__c, Geolocation__c, Picture__c, contact__r.Name from Boat__c where BoatType__c = :boatIdFin];
            
            System.debug('The returned matchingBoats list size is'+matchingBoats.size());
        }
        
        else {
            
             System.debug('The mathcing boat ID is NULL');
                       
			 matchingBoats = [Select  Name, BoatType__c, Geolocation__c, Picture__c, contact__r.Name from Boat__c ALL ROWS];
            
             System.debug('The returned no matchingBoats list size is'+matchingBoats.size());
            
        }
        
        System.debug('The final list is'+matchingBoats);
        
        return matchingBoats;
    }    
}




/*Map<String, String> matchingBoatIDMap = new Map<String, String>();
        
        for(BoatType__c btOne :matchingBoatIDList){
            
            matchingBoatIDMap.put('btOne.Name', 'String.ValueOf(btOne.Id)');
			            
        }*/
        
        //System.debug('The map size is'+matchingBoatIDMap.size());

​​​​​​​
This is the error -  I am getting in the browser.

User-added image

APEX Class is Executed:

User-added image

I am gettign the picklist value from the option selected and then passing the string to the APEX method and return a list of matching records  that I need to iterate over and display the picture of each as a Tile.

BoatTile component:
 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
	
    <aura:attribute name ="boat" type = "Boat__c" access="GLOBAL"/>
    
    <lightning:button class="tile" >
        
	<div style="{!'background:'+ ' url(' + v.boat.Picture__c +') no-repeat;background-position: center;background-size: cover;'}" class="innertile">
        
 	 <div class="lower-third">
         
   		<h1 class="slds-truncate">{!v.boat.Contact__c}</h1>
         
 	 </div>
        
	</div>
        
</lightning:button>
    
</aura:component>

Boat Tile CSS:
 
.THIS {
}

.THIS.tile {
    position:relative;
    display: inline-block;
    width: 100%;
    height: 220px;
    padding: 1px !important;
}
.THIS.innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.THIS.lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}

I have also tried replicating this in another org and still getting the same error.

​​​​​​​Any help would be highly appreicated! Thanks!​​​​​​​
Drew ChaplinDrew Chaplin
Did you ever figure this out?   I'm getting the same error using similar code.
Sabarish Chandramouli 1Sabarish Chandramouli 1
Hi Drew,

I figured this out. In the "BoatSearch Results" class, where you pull the boat details, remove the Geolocation__c field from the query and it should work.

User-added image

Let me know if it works!



 
Drew ChaplinDrew Chaplin
That was probably it for me as well.  I finished that about a week ago and here is my code:  
 
public with sharing class BoatSearchResults {
    @AuraEnabled
    public static List<Boat__c> getBoats(string boatTypeId) {
        List<Boat__c> boats = new List<Boat__c>();
        if (String.isEmpty(boatTypeId)) {
            boats = [select Id,Name,Picture__c,Contact__r.name from Boat__c];
        } else{
            boats = [select Id,Name,Picture__c,Contact__r.name from Boat__c where BoatType__c = :boatTypeId ];
        }
      
        return boats;
    }
}

I found it by removing every field that wasn't needed and it then worked.    At that point, I didn't explore to see which field was the problem.