1

Why cannot I use the push method of the array in the case?

Below you will be able to see that I am creating an empty array attribute named items in camping.cmp. I am setting it using the default="{}".

Then I pass the reference to items into the campingItemForm here <c:campingItemForm item="{!v.item}" items="{!items}" />.

Then in the form I have the controller attached to the button. And when I click the button I expect to be able to get the items array in the controller, and so I am expecting the push method being available to me.

But instead of the array I am getting undefined. What am I doing wrong here?

Here is the error message.

This page has an error. You might just need to refresh it.
Action failed: c:campingItemForm$controller$clickCreateItem [Cannot read property 'push' of undefined]
Failing descriptor: {c:campingItemForm$controller$clickCreateItem}

Here are the files.

campingApp.app :

<aura:application extends="force:slds">
    <c:camping />
</aura:application>

camping.cmp :

<aura:component >
    <aura:attribute name="items" type="Camping_Item__c[]" default="[]"/>
    <aura:attribute name="item" type="Camping_Item__c" default="{ 
                        'sobjectType': 'Camping_Item__c',
                        'campingItemName': 'campingItemNameDefault',
                        'Price__c': 0,
                        'Quantity__c': '0',
                        'Packed__c': false }"/>
    <c:campingHeader />
    <c:campingItemForm item="{!v.item}" items="{!items}" />
    <c:campingList />
</aura:component>

campingItemForm.cmp :

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <aura:attribute name="items" type="Camping_Item__c" required="true"/>
    <form class="slds-form--stacked">          
            <lightning:input aura:id="campingItemForm" label="Name"
                             name="campingItemName"
                             value="{!v.item.Name}"
                             required="true"/> 
            <lightning:input aura:id="campingItemForm" label="Quantity"
                             name="campingItemQuantity"
                             value="{!v.item.Quantity__c}"
                             min="1"
                             placeholder="QQQQQ"/>
            <lightning:input aura:id="campingItemForm" type="number" label="Price"
                             name="campingItemPrice"
                             formatter="currency"
                             step="0.01"
                             value="{!v.item.Price__c}"/>
            <lightning:input aura:id="campingItemForm" type="checkbox" label="Packed"  
                             name="cmapingItemIsPacked"
                             checked="{!v.newExpense.Reimbursed__c}"/>
            <lightning:button label="Create Camping Item" 
                              class="slds-m-top--medium"
                              variant="brand"
                              onclick="{!c.clickCreateItem}"/>
        </form>
</aura:component>

campingItemFormController.js :

({
    clickCreateItem : function(component, event, helper) {
        var newItem = component.get("v.item");
        var items = component.get("v.items");
        items.push(newItem);
        newItem = new Camping_Item__c();
        component.set("v.item", item);
        component.set("v.items", items);
    }
})

Here is what I see after clicking the button:

enter image description here

  • I think it may be because in your campingItemForm.cmp items is not an array and also, it does not have a default value. Maybe you trying to access the value before setting it hence the undefined. – manjit5190 May 21 '18 at 15:31
4

This items="{!items}" should be items="{!v.items}".

Whenever you see:

Cannot read property XXXX of undefined

it means you are trying to access a property (including a function property) from a value that you have failed to set to anything.

Probably not needed to get the code to work, but to keep anyone reading the code same also name="items" type="Camping_Item__c" should be name="items" type="Camping_Item__c[]".

  • Now I got this error: This page has an error. You might just need to refresh it. Action failed: c:campingItemForm$controller$clickCreateItem [Camping_Item__c is not defined] Failing descriptor: {c:campingItemForm$controller$clickCreateItem}. – oobarbazanoo May 21 '18 at 18:22
  • The error is produced by the line: newItem = new Camping_Item__c();. – oobarbazanoo May 21 '18 at 18:23
  • What could I try here? Since I am sure that the Camping_Item__c exists in my org. – oobarbazanoo May 21 '18 at 18:24
  • @oobarbazanoo SObject types are not automatically carried over into the JavaScript. Instead use this newItem = {sobjectType: "Camping_Item__c"};. – Keith C May 21 '18 at 19:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.