Skip to main content
Topics#Lightning ExperienceQuestion de WonJeung Choi
WonJeung Choi (I2MAX) a posé une question dans #Lightning Experience
17 juil. 2019, 08:35

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!
1 réponse
  1. Ajay Dubedi (Ajay Dubedi)
    17 juil. 2019, 14:01
    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
Rédiger une réponse...
0/9000