Cannot read property 'apply' of undefined

Hi, I'm doing Trailhead course: Lightning Components Basics (Input Data Using Forms) and hitting below error:

"Something has gone wrong. Action failed: aura$iteration$controller$itemsChange [Cannot read property 'apply' of undefined] Failing descriptor: {aura$iteration$controller$itemsChange}. Please try again."

Here is my campingList.cmp:

<aura:component >
    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{ 'sobjectType': 'Camping_Item__c',
                             'Name': '',
                             'Quantity__c': 0,
                             'Price__c': 0,
                             'Packed__c': false}"/>
    
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <div aria-labelledby="newcampingitemform">
        
        <!-- BOXED AREA -->
        <fieldset class="slds-box slds-theme--default slds-container--small">
            
            <legend id="newcampingitemform" class="slds-text-heading--small 
                                                   slds-p-vertical--medium">
                Add Camping Item
            </legend>
            
            <!-- CREATE NEW CAMPING ITEM FORM -->
            <form class="slds-form--stacked">
                
                <div class="slds-form-element slds-is-required">
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="name" label="Name"
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.newItem.Name}"
                                      required="true"/>
                    </div>
                </div>
                
                <div class="slds-form-element slds-is-required">
                    <div class="slds-form-element__control">
                        <ui:inputNumber aura:id="quantity" label="Quantity"
                                        class="slds-input"
                                        labelClass="slds-form-element__label"
                                        value="{!v.newItem.Quantity__c}"
                                        required="true"/>
                        
                    </div>
                </div>
                
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                        <ui:inputCurrency aura:id="price" label="Price"
                                          class="slds-input"
                                          labelClass="slds-form-element__label"
                                          value="{!v.newItem.Price__c}"
                                          required="true"/>
                    </div>
                </div>
                
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                        <ui:inputCheckbox aura:id="packed" label="Packed"
                                          class="slds-input"
                                          labelClass="slds-form-element__label"
                                          value="{!v.newItem.Packed__c}"/>
                    </div>
                </div>
                
                <div class="slds-form-element">
                    <ui:button label="Create Camping Item"
                               class="slds-button slds-button--brand"
                               press="{!c.clickCreateNewCampingItem}"/>
                </div>
            </form>
            <!-- / CREATE NEW CAMPING ITEM FORM -->
            
        </fieldset>
        <!-- / BOXED AREA -->
    </div>
    
    <!-- /SHOW LIST OF CAMPING ITEM  -->
     <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Camping Items</h3>
        </header>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.items}" var="i">
                    <c:campingListItem item="{!i}"/>
                </aura:iteration>
            </div>
        </section>
    </div> 
   <!-- /SHOW LIST OF CAMPING ITEM  -->
</aura:component>

And below is campingListItem.cmp:

<aura:component>
    <aura:attribute name="item" type="Camping_Item__c"/>
    <p>Name:
        <ui:outputText value="{!v.item.name}"/>
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quanity:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed:
        <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
</aura:component>

I can see the error happens in below code within campingList.cmp:

<aura:iteration items="{!v.items}" var="item">
                    <c:campingListItem item="{!item}"/>
                </aura:iteration>

And once I replace it with below code, the error doesn't happen any more. Can someone help check what's wrong with my nest component code. Thanks!

<aura:iteration items="{!v.items}" var="item">
                     <aura:attribute name="item" type="Camping_Item__c"/>
                     <p>Name:
                         <ui:outputText value="{!item.name}"/>
                     </p>
                     <p>Price:
                         <ui:outputCurrency value="{!item.Price__c}"/>
                     </p>
                     <p>Quanity:
                         <ui:outputNumber value="{!item.Quantity__c}"/>
                     </p>
                     <p>Packed:
                         <ui:outputCheckbox value="{!item.Packed__c}"/>
                     </p>
                 </aura:iteration>

October 20, 2016
·
Answer
·
Like
0
·
Follow
1

Joe Xu 7
Below are related coding:

campingListController.js:
({ clickCreateNewCampingItem: function(component, event, helper) { // Simplistic error checking var validItem = true; // Name,Quantity and Price must not be blank var nameField = component.find("name"); var quantityField = component.find("quantity"); var priceField = component.find("price"); var name = nameField.get("v.value"); var quantity = quantityField.get("v.value"); var price = priceField.get("v.value"); if ($A.util.isEmpty(name)){ validItem = false; nameField.set("v.errors", [{message:"Camping Item name can't be blank."}]); } else { nameField.set("v.errors", null); } if ($A.util.isEmpty(quantity)){ validItem = false; quantityField.set("v.errors", [{message:"Camping Item quantity can't be blank."}]); } else { quantityField.set("v.errors", null); } if ($A.util.isEmpty(name)){ validItem = false; priceField.set("v.errors", [{message:"Camping Item price can't be blank."}]); } else { priceField.set("v.errors", null); } // If we pass error checking, do some real work if(validItem){ // Create the new camping item var newCampingItem = component.get("v.newItem"); console.log("Create camping item: " + JSON.stringify(newCampingItem)); helper.createCampingItem(component, newCampingItem); } } })

campingListHelper.js:
({ createCampingItem: function(component, Camping_Item) { var theItems = component.get("v.items"); // Copy the item to a new object var newItem = JSON.parse(JSON.stringify(Camping_Item)); console.log("Item before 'create': " + JSON.stringify(theItems)); theItems.push(newItem); console.log("Item after 'create': " + JSON.stringify(theItems)); component.set("v.items", theItems); } })

Thanks.

October 20, 2016
·
Like
0
·
Dislike
0

karthikeyan perumal
Hello

Try to wrap it your iteration with span it will solved,

use below code,

<aura:component > <aura:attribute name="newItem" type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c', 'Name': '', 'Quantity__c': 0, 'Price__c': 0, 'Packed__c': false}"/> <aura:attribute name="items" type="Camping_Item__c[]"/> <div aria-labelledby="newcampingitemform">  <fieldset class="slds-box slds-theme--default slds-container--small"> <legend id="newcampingitemform" class="slds-text-heading--small slds-p-vertical--medium"> Add Camping Item </legend>  <form class="slds-form--stacked"> <div class="slds-form-element slds-is-required"> <div class="slds-form-element__control"> <ui:inputText aura:id="name" label="Name" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Name}" required="true"/> </div> </div> <div class="slds-form-element slds-is-required"> <div class="slds-form-element__control"> <ui:inputNumber aura:id="quantity" label="Quantity" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Quantity__c}" required="true"/> </div> </div> <div class="slds-form-element"> <div class="slds-form-element__control"> <ui:inputCurrency aura:id="price" label="Price" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Price__c}" required="true"/> </div> </div> <div class="slds-form-element"> <div class="slds-form-element__control"> <ui:inputCheckbox aura:id="packed" label="Packed" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Packed__c}"/> </div> </div> <div class="slds-form-element"> <ui:button label="Create Camping Item" class="slds-button slds-button--brand" press="{!c.clickCreateNewCampingItem}"/> </div> </form>  </fieldset>  </div>  <div class="slds-card slds-p-top--medium"> <header class="slds-card__header"> <h3 class="slds-text-heading--small">Camping Items</h3> </header> <section class="slds-card__body"> <div id="list" class="row"> <aura:iteration items="{!v.items}" var="i"> <span> <c:campingListItem Name="{!i.name}" Price="{!i.Price__c}" Quantity="{!i.Quantity__c}" Packed="{!i.Packed__c}"/> </span> </aura:iteration> </div> </section> </div>  </aura:component>

hopw this will help you,

Mark BestANSWER if its work for you.

Thanks
karthik

October 22, 2016
·
Like
1
·
Dislike
0

Joe Xu 7
Thanks Karthik. The span doesn't help but I was able to pass the test by moving the controllor help class into controller itself. Strange thing is although test is passed, I'm still hitting the same error while testing the app for the first click only. After first click, it seems working but iteration doesn't shows up. Still not sure what's wrong, but think this is just a step-stone for the whole couser. Will move to next course on the server side controller. Thanks anyway for your help.

October 23, 2016
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Cannot read property 'apply' of undefined

You need to sign in to do that.