function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
WonJeungWonJeung 

Error while doing Aura Components Basics module on Trailhead

Hello, I'm new to Salesforce and I'm currently learning Aura Components Basics Module. I'm having problems with Input Data Using Forms unit at the moment.

The error says : "The campingList component isn't iterating the array of 'items' and creating 'campingListItem' components"

but it seems my program works fine, and I don't understand what exactly the error means?

Here's my code:

campingApp.app 
<aura:application extends = "force:slds" >
    <c:campingHeader/>
    <c:campingList/>
</aura:application>

campingList.cmp 
<aura:component >
    <aura:attribute name = "items" type = "Camping_Item__c[]"/>
    <aura:attribute name = "newItem" type = "Camping_Item__c"
                    default = "{ 'sobjectType': 'Camping_Item__c',
                                       'Quantity': 0,
                                       'Price': 0}"/>
    
    <!-- NEW CAMPING FORM STARTS HERE -->
    <form class="slds-form--stacked">          
        <lightning:input aura:id = "campingform" label = "Name" value = "{!v.newItem.Name__c}"/>
        <lightning:input aura:id = "campingform" type = "number" label = "Quantity" min = "1" value = "{!v.newItem.Quantity__c}"/>
        <lightning:input aura:id = "campingform" type = "number" label = "Price" formatter = "currency" value = "{!v.newItem.Price__c}"/>
        <br></br>
        <lightning:input aura:id = "campingform" type = "checkbox" label = "Packed?" value = "{!v.newItem.Packed__c}"/>
        <br></br>
        <lightning:button label = "Add an item" onclick = "{!c.clickCreateItem}"/>
    </form>
    <!-- CAMPING FORM ENDS HERE -->
    
    <!-- LIST OF CAMPING ITEMS STARTS HERE -->
    <aura:iteration items  = "{!v.items}" var = "item">        
        <c:campingListItem campingListItem = "{!item}"/>
    </aura:iteration>
    <!-- END OF CAMPING ITEMS -->
</aura:component>

campingListController.js 
({
    clickCreateItem : function(component, event, helper) {
        var validItem = component.find('campingform').reduce(function(validSoFar, inputCmp){
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        if(validItem){
            var newItemList = component.get("v.items");
            var newItem = JSON.parse(JSON.stringify(component.get("v.newItem")));
            console.log("===== BEFORE =====");
            console.log(JSON.stringify(newItemList));
            newItemList.push(newItem);
            component.set("v.items", newItemList);
            console.log("===== AFTER =====");
            console.log(JSON.stringify(newItemList));
        }
    }  
})

campingListItem.cmp 
<aura:component>
    <aura:attribute name="campingListItem" type="Camping_Item__c"/>
    <p>{!v.campingListItem.Name__c}</p>
    <p>{!v.campingListItem.Quantity__c}</p>
    <p>{!v.campingListItem.Price__c}</p>
    <p>{!v.campingListItem.Packed__c}</p>
</aura:component>


It would be great if someone explains why the error message says the campingListItem isn't created. Thanks!
Ajay K DubediAjay K Dubedi
Hi WonJeung,

I think you have problem in your campinglistItem component, I'm sharing the codes of campingListItem and campingList, refer to them.

campingList:

COMPONENT:

<aura:component controller="CampingListController">
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <aura:handler name="addItem" event="c:addItemEvent"
       action="{!c.handleAddItem }"/>
    

    
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    
    <ol>
    <li>Bug Spray</li>
    <li>Bear Repellant</li>
    <li>Goat Food</li>
    </ol>
    
       <!-- NEW ITEM FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">

        <c:campingListForm />

    </div>
    <!-- / NEW ITEM FORM -->    
   

    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Items</h3>
        </header>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.items}" var="items">
                    <c:campingListItem item="{!item}"/>
                </aura:iteration>
            </div>
        </section>
    </div>

</aura:component>

CONTROLLER:

campingListItem:

COMPONENT:
  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="item" type="Camping_Item__c" description="instance of Camping_Item__c object" required="true" default="{Packed__c : false}" access="global"/>

    <lightning:card title="{!v.item.Name}" iconName="action:goal"
                    class="{!v.item.Packed__c ?
                            'slds-theme--success' : ''}">

        <p class="slds-text-heading--medium slds-p-horizontal--small">
            Name: {!v.item.Name}
        </p>
        <p class="slds-text-heading--medium slds-p-horizontal--small">Price:
            <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
        </p>

        <p class="slds-text-heading--medium slds-p-horizontal--small">Quantity:
            <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
        </p>

        <p class="slds-text-heading--medium slds-p-horizontal--small">
            <lightning:input type="toggle"
                             label="Packed"
                             name="Packed"
                             class=" slds-text-heading--medium slds-p-around--small"
                             checked="{!v.item.Packed__c}" />
        </p>
        <aura:set attribute="footer">
            <p> <lightning:button label="Packed!"
                                  onclick="{!c.packItem}"/></p>
        </aura:set>

    </lightning:card>
</aura:component>



CONTROLLER:
  
({
    packItem : function(component, event, helper) {
        var checkbox = component.get("v.item",true);
        checkbox.Packed__c = true;
        component.set("v.item",checkbox);
        event.getSource().set("v.disabled", true);
    }
})



Hoping these two code samples will solve your problem. Please let me know about the outcomes.

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi