function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Martha VMartha V 

Lightning Component Framework Specialist - step 4 aura:iteration not working

Hi, my code has passed the step 4 check, but when I try the search by boat type no boats appear on the BoatSearchResults component. I have done some debugging and found that it is not entering into the aura:iteration and can't figure out why. Hopefully someone can help me.

The string "going to AuraIteration" appears on the screen, but nothing else. The variable v.boats contains the right amount of items (I am testing it with Sailboat type and it has 2 items. It also has the right values in each object.

Here is my code: 


BoatSearchResults.cmp
<aura:component controller="BoatSearchResults">
    <aura:attribute name="boatTypeId" type="String" />
    <aura:method name="search" description="gets the boatTypeId from BoatSearch component and runs the search"
                 action="{!c.doSearch}">
        <aura:attribute name="boatTypeId" type="String" />
    </aura:method >
    <aura:attribute name="boats" type="Boat__c[]" />
    <lightning:layout multipleRows="true" verticalAlign="center" horizontalAlign="center">
        <aura:if isTrue="{!v.boats.length &gt; 0}">
            going to AuraIteration
            <aura:iteration items="{!v.boats}" var="boatItem">
                <lightning:layoutItem flexibility="grow" class="slds-m-right_small">
                    <h3>calling BoatTile</h3>
                    <c:BoatTile boat="{!boatItem}"/>
                </lightning:layoutItem>
            </aura:iteration>
            <aura:set attribute="else">
                <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto">
                    <h3>No boats found</h3>
                </lightning:layoutItem>
            </aura:set>
        </aura:if>
    </lightning:layout>
</aura:component>

Also, can someone tell me how to post code so it looks like code (lined and with the option to copy, etc)

Thanks!

 
Raj VakatiRaj Vakati
Refer this link

https://salesforce.stackexchange.com/questions/202767/cant-see-the-boats-appearing-step-4

https://developer.salesforce.com/forums/?id=9060G000000MUgLQAW
ajay Duggi(Heptarc)ajay Duggi(Heptarc)
Dear Martha Vance5,
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" 
                access="global" controller="BoatSearchResults">
    <aura:handler name="init" action="{!c.doSearch}" value="{!this}"/>
    <aura:attribute name="boatTypeId" type="String" />
    <aura:attribute name="boats" type="Boat__c[]" />  
    <!--<aura:method name="search" description="Sample method with parameter">
        <aura:attribute name="boatTypeId" type="String"  />
    </aura:method>-->
    <!-- set up the aura:method for search -->
    <aura:method name="search" description="accepts boatTypeId
            and executes search that refreshes the boats attribute">
        <aura:attribute name="boatTypeId" type="Id"/>
    </aura:method>
    <!-- Display errors, if any -->
    <!--
    <aura:if isTrue="{!not(empty(v.errorString))}">
        <div class="recordError">
            <ui:message title="Error" severity="error" closable="true">
                {!v.errorString}
            </ui:message>
        </div>
    </aura:if>-->
    <aura:if isTrue="{!not(empty(v.boats))}">
        <lightning:layout multipleRows="true" horizontalAlign="center">
                <aura:iteration items="{!v.boats}" var="boatVar">
                    <lightning:layoutItem flexibility="grow"  class="slds-m-right_small" >   
                        <c:BoatTile boat="{!boatVar}"/>
                    </lightning:layoutItem>
                </aura:iteration>
        </lightning:layout>
         <aura:set attribute="else">
            <div class="slds-align_absolute-center">No boats found</div>
        </aura:set>
    </aura:if>
</aura:component>
Please try code it may helps,
Please let me know if problem solves.
Martha VMartha V

Dear ajay Duggi(Heptarc),

I tried your code, and am still getting the same thing. It is not going into the Aura:iteration :(
Martha VMartha V
Raj,
I followed the links you supplied and neither of them helped me.
Christan G 4Christan G 4
Hi Martha, I hope you are well. I knew it was a long time since you posted this but I think your issue resides in either the apex method you are using to retrieve the boats or in your javascript client side code. Hopefully, you were able to resolve your issue by now.
DHARSHAN B KDHARSHAN B K
Hi Friends, 
my code has passed the step 4 check


--------------------------------------------------------------------
BoatSearch.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<lightning:card title="Find a Boat" class="slds-m-top_10px" >
     <c:BoatSearchForm />
</lightning:card>    
<lightning:card title="Matching Boats" >
     <c:BoatSearchResults /> 
</lightning:card>
<aura:handler name="formsubmit"
                  event="c:FormSubmit"
                  action="{!c.onFormSubmit}"
                  phase="capture"/>

</aura:component>
--------------------------------------------------------------------

BoatSearchResults.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" 
                access="global" controller="BoatSearchResults">
    <aura:handler name="init" action="{!c.doSearch}" value="{!this}"/>
    <aura:attribute name="boatTypeId" type="String" />
    <aura:attribute name="boats" type="Boat__c[]" />  
    <!--<aura:method name="search" description="Sample method with parameter">
        <aura:attribute name="boatTypeId" type="String"  />
    </aura:method>-->
    <!-- set up the aura:method for search -->
    <aura:method name="search" description="accepts boatTypeId
            and executes search that refreshes the boats attribute">
        <aura:attribute name="boatTypeId" type="Id"/>
    </aura:method>
    <!-- Display errors, if any -->
    <!--
    <aura:if isTrue="{!not(empty(v.errorString))}">
        <div class="recordError">
            <ui:message title="Error" severity="error" closable="true">
                {!v.errorString}
            </ui:message>
        </div>
    </aura:if>-->
    <aura:if isTrue="{!not(empty(v.boats))}">
        <lightning:layout multipleRows="true" horizontalAlign="center">
                <aura:iteration items="{!v.boats}" var="boatVar">
                    <lightning:layoutItem flexibility="grow"  class="slds-m-right_small" >   
                        <c:BoatTile boat="{!boatVar}"/>
                    </lightning:layoutItem>
                </aura:iteration>
        </lightning:layout>
         <aura:set attribute="else">
            <div class="slds-align_absolute-center">No boats found</div>
        </aura:set>
    </aura:if>
</aura:component>
----------------------------------------------------------------
BoatSearchForm.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="BoatSearchFormController" >
    <aura:handler name="formsubmit"
                  event="c:FormSubmit"
                  action="{!c.onFormSubmit}"
                  phase="capture"/>
    
    <aura:attribute name="searchOptions" type='String[]' default='All'/>
    <aura:attribute name='searchOptionToIdMap' type='Map' default="{All:''}" />
    <aura:attribute name='showNewButton' type='Boolean' default='false'/>

        
    <lightning:layout horizontalAlign="center"   >

       <lightning:layoutItem class="slds-grid_vertical-align-center" >

           <lightning:select aura:id='typeSelect' name='selectItem' label='' onchange=''>
             <aura:iteration items='{!v.searchOptions}' var='option'>
                 <option value='{!option}' text='{!option}'></option>
             </aura:iteration>
         </lightning:select>
       </lightning:layoutItem>

       <lightning:layoutItem class="slds-grid_vertical-align-center" >
         <lightning:button label="Search" variant="brand" onclick='{!c.onFormSubmit}' />
         <aura:if isTrue='{!v.showNewButton}'>
            <lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>
        </aura:if>
       </lightning:layoutItem>

    </lightning:layout>

</aura:component>
-------------------------------------------------------------------------------

BoatSearchFormController.js

({    createBoat: function (component,event,helper) {
        var createRecordEvent = $A.get('e.force:createRecord');
        if (createRecordEvent) {
            var typeName = component.find('typeSelect').get('v.value');
            var typeMap = component.get('v.searchOptionToIdMap');
            var typeId = null;
            if (typeName && typeMap && typeMap[typeName]) {
                typeId = typeMap[typeName];
            }
            createRecordEvent.setParams({
                'entityApiName': 'Boat__c',
                'defaultFieldValues': {
                    'BoatType__c': typeId
                }
            });
            createRecordEvent.fire();
        }
    },
    
    onFormSubmit : function(component, event, helper){
        var boatTypeId = component.get("v.selectedType");
        console.log("Search button pressed " + boatTypeId);
        var formSubmit = component.getEvent("FormSubmit");
        formSubmit.setParams({"formData":
                            {"boatTypeId" : boatTypeId}
        });
        formSubmit.fire();
    },   
})
--------------------------------------------------------------
 BoatSearchResults.apxc

public with sharing class BoatSearchResults  {
    @AuraEnabled
     public static List <Boat__c> getBoats(String boatTypeId) {
      if(boatTypeId != '')  {
             return [SELECT id, BoatType__c, picture__c, name,contact__r.Name
                    FROM Boat__c
                    WHERE BoatType__c =:boatTypeId];
      } else {
          return [SELECT id, BoatType__c, picture__c, name,contact__r.Name
                    FROM Boat__c];
      }
         }
         }
------------------------------------------------------------
BoatSearchResultsHelper.js

({
    onSearch : function(component) {
        var action = component.get("c.getBoats");
        action.setParam({"boatTypeId":""});
        action.setCallback(this, function(response){
        var status = response.getState();
            if(status === "SUCCESS"){
             if(! $A.util.isEmpty(response.getReturnValue())){
                    component.set("v.boatTypeId",response.getReturnValue()); 
                } else {
                     component.set("v.recordError","No boats found");
                }
            }
        });
        $A.enqueueAction(action);
    }
})
-----------------------------------------------------------------
 FormSubmit.evt

<aura:event type="COMPONENT" description="Boat Event">
    <aura:attribute name="formData" type="Object"/>
    
</aura:event>
-------------------------------------------------------------------------
BoatSearchController.js

({
    onFormSubmit : function(component, event, helper){
        console.log("event received by BoatSearchController.js");
        var formData = event.getParam("formData");
        var boatTypeId = formData.boatTypeId;
        var BSRcmp = component.find("BSRcmp");
        var auraMethodResult = BSRcmp.search(boatTypeId);
        console.log("auraMethodResult: " + auraMethodResult);
    }
})
---------------------------------------------------------------------------
BoatTile.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
 <aura:attribute name="boat" type="Boat__c" />
    <aura:attribute name="selected" type="String" />
 <lightning:button class="tile">
        <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>
 </aura:component>
--------------------------------------------------------------------------------
Any help much appreciated. I would love to hear some new tips and new techniques with this task. If you share some source code that would greately appreciated. 

Thank you