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
John Lay 9John Lay 9 

The campingListItem JavaScript controller isn't setting the 'Packed' value correctly.

Working the "Handle Actions with Controllers" trailhead module and I'm not getting past the validation.
If I put the component in a test jig, I can see the button function and set the check box as expected.
 

Here is the code I'm using to set the item as packed...

component.set("v.item.Packed__c", true );

I'm assuming the validator does not like my syntax. Can you give me a hint to get past this?

Thanks.
John

Best Answer chosen by John Lay 9
John Lay 9John Lay 9
Found the answer.... I needed to use a var....

var a = component.get("v.item",true);
 a.Packed__c = true;
 component.set("v.item",a);

All Answers

John Lay 9John Lay 9
Found the answer.... I needed to use a var....

var a = component.get("v.item",true);
 a.Packed__c = true;
 component.set("v.item",a);
This was selected as the best answer
Michael_WhiteMichael_White
Thanks for sharing John - I ran into the same issue and was following a similar approach.  
Yashita Goyal 17Yashita Goyal 17
Hi John,

I am trying to work on same trailhead challenge:

Add a button to the campingListItem component that when clicked, marks the item as packed.
  • Add a button labeled "Packed!" that calls the packItem controller function when clicked.
  • The controller action marks the item attribute as packed and disables the button.
However, am running into issue as: Cannot set property 'Packed__c' of null.

Below is the code for reference:
  
<aura:component implements="force:appHostable">
    <aura:attribute name="item" type="Camping_Item__c"/>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Packed:
    	<ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
    <p>Price:
    	<ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
		<ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>
    	<ui:button label="Packed!" press="{!c.packItem}"/>
    </p>
</aura:component>


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

Can you please correct me if am doing anything wrong.

Thanks.
Yashita
John Lay 9John Lay 9
Check to ensure you are setting values for item, either use defaults or an init function
david boukhors 23david boukhors 23
Hello John Lay,

thank you for sharing!
Could you tell me where I can find more information about the "var a = component.get("v.item",true);" syntax? I don't get the need for a second argument? 
By the way, is it possible to activate auto-completion in the developer console for ligthning development?

Best Regards

David
Richard XSJRichard XSJ
Hi Yashita.
I hope you're fine. Have you managed to fix? I am facing the same issue "Cannot set property 'Packed__c' of null"
Thank you upfront for help
Best regards
Yashita Goyal 17Yashita Goyal 17
Hi Richard,

Below is the code for reference

CampingListItem.cmp: 
<aura:component implements="force:appHostable">
   <aura:attribute name="item" type="Camping_Item__c"/>
     <p>The Item is: 
         <ui:outputText value="{!v.item}" />
    </p> 
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
    	<ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
		<ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed?:
    	<ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
    <p>
    	<ui:button label="Packed!" press="{!c.packItem}"/>
    </p> 
</aura:component>
CampingListItemController.js: 
({
	 packItem: function(component, event, helper) {
        var btn= event.getSource();
		var BtnMessage =btn.get("v.label");
        component.set("v.item",BtnMessage);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);     
     }
})

Thanks.
Richard XSJRichard XSJ
Thank you for the help Yashita. In fact, I was expecting that the checkbox "Packed__C" would be checked after the button click. But that's ok. Regards
Yashita Goyal 17Yashita Goyal 17
Welcome. I am still working on checkbox checked.
Richard XSJRichard XSJ
Hi Yashita
I've managed to fix. Just set the initial value to "Packed__C" in the component.
This is the part of code that I've used.
.... 
 <aura:attribute name="item" type="Camping_Item__c"
     default="{ 'sobjectType': 'Camping_Item__c',
                    'Packed__c': false}"/>
....

Bellow the controller code
....
     packItem: function(component, event, helper) {
        var a = component.get("v.item");
         a.Packed__c = true;
         component.set("v.item",a); 
.....
Regards
Yashita Goyal 17Yashita Goyal 17
Hi Richard, Am still not able to make it work. I don’t know if am doing anything wrong. Below is the controller code: ({ packItem: function(component, event, helper) { var btn= event.getSource(); var BtnMessage =btn.get("v.label"); component.set("v.item",BtnMessage); var a = component.get("v.item"); a.Packed__c = true; component.set("v.item",a); var btnClicked = event.getSource(); btnClicked.set("v.disabled",true); } }) Thanks. Regards, Yashita Goyal
rajjjjrajjjj
After a long try got it worked. Try this one. I did set extra values just to play around. If someone tried initialization using aura:handler and calling JS action controller please post it. I will try later, but it was in my action item.
  
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" default="{'sObjectType':'Camping_Item__c',
                                                                'Name':'Item1',
                                                                'Quantity__c':10,
                                                                'Price__c':100,
                                                                'Packed__c':false}"/>
    <p><ui:outputText value="{!v.item.Name}" /></p>
    <p><ui:outputNumber value="{!v.item.Quantity__c}" /></p>
    <p><ui:outputCurrency value="{!v.item.Price__c}" /></p>
    <p><ui:outputCheckbox value="{!v.item.Packed__c}" /></p>
    <p><ui:button label="Packed!" press="{!c.packItem}"/></p>
</aura:component>

JS Controller:
  
({
	packItem : function(component, event, helper) {
		
        var a = component.get("v.item");
	a.Name = 'Item2';
        a.Quantity__c = 20;
        a.Price__c = 200;
        a.Packed__c = true;
        component.set("v.item",a);
        
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);
        
	}
})


 
fifedog15fifedog15
I'm a bit lost on this one.  I think I'm close but I'm getting this error: Action failed: c$campingListItem$controller$packItem [sob_item is undefined] Failing descriptor: {c$campingListItem$controller$packItem}

screenshot

I'm really trying to understand what the heck I'm doing, verse just copy pasting the answers.  I'm not sure why I'm getting my sob_item is undefined. any advise?
Abel La Rosa 3Abel La Rosa 3
Richard XSJ and Rajjj, thank you for your answer, using a default object was the solution for me.
Radiya FirdousRadiya Firdous
@fifedog15
event.getSource() gives you your button. Then .get("v.item", true) tells the button to look within itself and find 'item' which doesn't exist.
'item' is actually found within 'component' so you need to do             var sob_item = component.get("v.item", true);
Then the rest of that block of code should work and marks the item attribute as packed.

 
Tomas.RayTomas.Ray
packItem : function(component, event, helper) {
		var a = component.get("v.item");
		a.Packed__c = true;
		component.set("v.item", a);
		//component.set("v.item.Packed__c", true);
		event.getSource().set("v.disabled",true);
}
After replacing line#5 with line#2-4, it passed validation.  Although both are working, it seems SFDC doesn't like simple version.
 
Kewal Jaipuria 1Kewal Jaipuria 1
True, @thomas.
Muhammad umerMuhammad umer
We don't need to use a variable in the controller side. But we need a default value while declaring the attribute. Even default value won't be required if an existing record is been displayed already that is in the presence of data default value is not required. Without data it throws 'null' error which is removed by setting default value.
Muhammad umerMuhammad umer
Here is the working code for your reference please: 
({
    packItem: function(component, event, helper) {
		btnClicked.set("v.disabled",true);
        component.set("v.item.Packed__c", true);     
    }
})
  
<aura:component >

    <aura:attribute name="item" type="Camping_Item__c"  default="{ 'sobjectType': 'Camping_Item__c',
                    'Packed__c': false}" />	
   <p> Name: {!v.item.Name} </p>
   <p> Price: <lightning:formattedNumber value="{!v.item.Price__c}" style="currency" /> </p>
   <p> Quantity: <lightning:formattedNumber value="{!v.item.Quantity__c}" /> </p>
	<p>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="packed"                         
                         checked="{!v.item.Packed__c}" />
    </p>             
 
    <div>
        <lightning:button label="Packed!" name='myButton' onclick="{!c.packItem}"/>
    </div>	
</aura:component>

 
Sai Ram ASai Ram A
Hello folks,
my 2cents 
({
	packItem : function(component, event, helper) {
		var btnpackItemClicked = event.getSource();
        btnpackItemClicked.set("v.disabled", true);
        //event.getSource().set("v.disabled", true);	combining abv 2 lines into a single statement
        component.set("v.item.Packed__c", true);	
        //component.set("v.disabled",true); //this line is throwing a Javascript error
	},
    packItem1 : function(component, event, helper) {
		var item = component.get("v.item");	//why do we need to explicitly call the Object variable? why not component.set("v.item.Packed__c", true); ?
        item.Packed__c = true;	// this line and below line doesnot seem to be needed? 
        component.set("v.item",item);	
        component.set("v.disabled",true); 
	}
})
  
<!-- campingList.cmp -->
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" 
                    required="true" 
                    default="{'Name':'Sai ram',
                             'Price__c':'100',
                             'Quantity__c':'10',
                             'Packed__c':false
                             }"/>
    <aura:attribute name="description" type="string"/>
    <aura:attribute name="disabled" type="boolean" default="false"/>
    <p>Name 
        <lightning:formattedText value="{!v.item.Name}" />
    </p>
    <p>Price
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
	<p>Quantity
        <lightning:formattedNumber value="{!v.item.Quantity__c}" />
    </p>
    <p>
        <lightning:input type="toggle"                            
                         checked="{!v.item.Packed__c}" label="Packed"/>
     </p> 
    
    
    <lightning:button label="Packed!" onclick="{!c.packItem}" 
                      variant="brand" iconName="utility:download" 
                      iconPosition="left" />
    
    <lightning:button label="Packed1!" onclick="{!c.packItem1}" 
                      variant="brand" iconName="utility:download" 
                      iconPosition="left" disabled="{!v.disabled}"/>
    
</aura:component>


 
Rich FiekowskyRich Fiekowsky
"item" is the data record that the component is displaying or modifying. The custom code in the client-side controller needn't/shouldn't care about the toggle widget! Instead, change the value in the data record, and Lightning's magic "wiring" carries the ball from there.
Less clear to me is why the "item" must be "getted" into a variable first. You would think that   
component.set("v.item.Packed__c", true); 
means the same thing; but it does not pass the "Check Challenge".
 
Jesse WolffJesse Wolff
If someone can tell me I'm wrong, that's fine, but I got the challenge to pass based on this thread.  I was thoroughly confused with why we needed to define an sObject type in defaults when we had already set the Lightning Component type to "Camping_Item__c" and the answer turns out we don't.  The key, I think, is to set the default="{'Packed__c':false}" to eliminate the null value, then the controller will work with the simple code below:
  
({
	packItem : function(component, event, helper) {
	     component.set("v.item.Packed__c", true);
             console.log("done");
             event.getSource().set("v.disabled",true);
    }
})

I did the challenge again and this worked for me (it also resolved the error I was getting in the earlier challenge with  setting the required attribute to true.
Ashish Nigam 8Ashish Nigam 8
Hi Team,

I am little bit surprice about this excerise of trailhead. I am getting the following error message 

This page has an error. You might just need to refresh it. Action failed: c:campingListItem$controller$packItem [Cannot set property 'Packed__c' of undefined] Failing descriptor: {c:campingListItem$controller$packItem}

Still my Excerise pass the validation.

here is my code
Component: 
<aura:component implements="force:appHostable">
   <aura:attribute name="item" type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c', 'Packed__c': false}"/>
     <p>The Item is: 
         <ui:outputText value="{!v.item}" />
    </p> 
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
    	<ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
		<ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed?:
    	<ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
    <p>
    	<ui:button label="Packed!" press="{!c.packItem}"/>
    </p> 
</aura:component>

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

I am getting error message 

This page has an error. You might just need to refresh it. Action failed: c:campingListItem$controller$packItem [Cannot set property 'Packed__c' of undefined] Failing descriptor: {c:campingListItem$controller$packItem}

I check 100 time the field name , and it was correct. 

apart from this my validation is successfully clear , but my code is still not working.