Hi!

The error I'm seeing is 'The campingList component isn't iterating the array of 'items' and creating 'campingListItem' components'. I think my problem is in my campingListItem.cmp and campingListItemController. I am iterating through the list of items and outputting them but are they being created? When is the packItem method being accessed?

My code is as follows:

campingList.cmp (Component)

<aura:component >
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{ 'sobjectType': 'Camping_Item__c',
                            'Name': '',
                            'Quantity__c': 0,
                            'Price__c': 0}"/>
 
  
    
    <!-- CREATE NEW 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="Item 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}"/>
            </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 Item"
                       class="slds-button slds-button--brand"
                       press="{!c.clickCreateItem}"/>
        </div>
        
    </form>
    <!-- / CREATE NEW EXPENSE 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="item">
                    <c.campingListItem item="{!item}"/>
                    
                </aura:iteration>
            </div>
        </section>
    </div>
    
</aura:component>


campingListController 

({
    clickCreateItem : function(component, event, helper) {
        // Simplistic error checking
        var validItem = true;
        var item = component.get("v.newItem");
        
        // Name must not be blank
        var nameField = component.find("name");
        var itemname = nameField.get("v.value");
        if ($A.util.isEmpty(itemname)){
            validItem = false;
            nameField.set("v.errors", [{message:"Please enter item name"}]);
        }
        else {
            nameField.set("v.errors", null);
        }
        
        // Quantity must not be blank
        var quantityField = component.find("quantity");
        var itemquantity = quantityField.get("v.value");
        if ($A.util.isEmpty(itemquantity)){
            validItem = false;
            quantityField.set("v.errors", [{message:"Please enter item quantity"}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
        
        // Price must not be blank
        var priceField = component.find("price");
        var itemprice = priceField.get("v.value");
        if ($A.util.isEmpty(itemprice)){
            validItem = false;
            priceField.set("v.errors", [{message:"Please enter price"}]);
        }
        else {
            priceField.set("v.errors", null);
        }
        
        if(validItem){
            var newItem = component.get("v.newItem");
           // document.write('Create item: '+JSON.stringify(newItem));
            var theItemList = component.get("v.items");
            
            var newItem = JSON.parse(JSON.stringify(newItem));
            theItemList.push(newItem);
            
            component.set("v.items",theItemList);
        }
        
        var setList = component.get("v.items")
        console.log('the Item list is: '+JSON.stringify(setList));
        
        component.set("v.newItem",{'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Price__c': 0,                               
                    'Quantity__c': 0,
                    'Packed__c': false });
    }
})



campingListItem.cmp

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



campingListItemController 

({
    packItem : function(component, event, helper) {
        var trialItem = component.get("v.item")
        console.log('the Item is: '+JSON.stringify(trialItem));
        
        var x = component.get("v.item", true);
        x.Packed__c = true;
        component.set("v.item", x);
        
        var buttonClicked = event.getSource();
        buttonClicked.set("v.disabled", true);
    }
})









 

Hi!

The error I'm seeing is 'The campingList component isn't iterating the array of 'items' and creating 'campingListItem' components'. I think my problem is in my campingListItem.cmp and campingListItemController. I am iterating through the list of items and outputting them but are they being created? When is the packItem method being accessed?

My code is as follows:

campingList.cmp (Component)

<aura:component >
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{ 'sobjectType': 'Camping_Item__c',
                            'Name': '',
                            'Quantity__c': 0,
                            'Price__c': 0}"/>
 
  
    
    <!-- CREATE NEW 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="Item 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}"/>
            </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 Item"
                       class="slds-button slds-button--brand"
                       press="{!c.clickCreateItem}"/>
        </div>
        
    </form>
    <!-- / CREATE NEW EXPENSE 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="item">
                    <c.campingListItem item="{!item}"/>
                    
                </aura:iteration>
            </div>
        </section>
    </div>
    
</aura:component>


campingListController 

({
    clickCreateItem : function(component, event, helper) {
        // Simplistic error checking
        var validItem = true;
        var item = component.get("v.newItem");
        
        // Name must not be blank
        var nameField = component.find("name");
        var itemname = nameField.get("v.value");
        if ($A.util.isEmpty(itemname)){
            validItem = false;
            nameField.set("v.errors", [{message:"Please enter item name"}]);
        }
        else {
            nameField.set("v.errors", null);
        }
        
        // Quantity must not be blank
        var quantityField = component.find("quantity");
        var itemquantity = quantityField.get("v.value");
        if ($A.util.isEmpty(itemquantity)){
            validItem = false;
            quantityField.set("v.errors", [{message:"Please enter item quantity"}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
        
        // Price must not be blank
        var priceField = component.find("price");
        var itemprice = priceField.get("v.value");
        if ($A.util.isEmpty(itemprice)){
            validItem = false;
            priceField.set("v.errors", [{message:"Please enter price"}]);
        }
        else {
            priceField.set("v.errors", null);
        }
        
        if(validItem){
            var newItem = component.get("v.newItem");
           // document.write('Create item: '+JSON.stringify(newItem));
            var theItemList = component.get("v.items");
            
            var newItem = JSON.parse(JSON.stringify(newItem));
            theItemList.push(newItem);
            
            component.set("v.items",theItemList);
        }
        
        var setList = component.get("v.items")
        console.log('the Item list is: '+JSON.stringify(setList));
        
        component.set("v.newItem",{'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Price__c': 0,                               
                    'Quantity__c': 0,
                    'Packed__c': false });
    }
})



campingListItem.cmp

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



campingListItemController 

({
    packItem : function(component, event, helper) {
        var trialItem = component.get("v.item")
        console.log('the Item is: '+JSON.stringify(trialItem));
        
        var x = component.get("v.item", true);
        x.Packed__c = true;
        component.set("v.item", x);
        
        var buttonClicked = event.getSource();
        buttonClicked.set("v.disabled", true);
    }
})









 

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