Update: When I removed the <tr></tr> part from campingListItem.cmp and added init handler in that component (under <aura:component>), I was able to view the values of the items via , but then received the following error.  Given that, I have copied all of my code below.


campingHeader.cmp (called by TestCamping.app)

<aura:component >
       
        <!-- PAGE HEADER -->
        <lightning:layout class="slds-page-header slds-page-header--object-home">
            <lightning:layoutItem >
                <lightning:icon iconName="action:goal" alternativeText="Camping"/>
            </lightning:layoutItem>
            <lightning:layoutItem padding="horizontal-large">
                <div class="page-section page-header">
                    <h1 class="slds-text-heading--label">Camping List</h1>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
        <!-- / PAGE HEADER -->
    
        <c:campingList />
    
</aura:component>

campingList.cmp

<aura:component controller="CampingListController">

    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    
    <aura:attribute name="items" type="Camping_Item__c[]"/>

    <aura:attribute name="newItem" type="Camping_Item__c" 
                    default="{'sobjectType': 'Camping_Item__c',
                             'Name': 'Enter item here',
                             'Quantity__c': 0,
                             'Price__c': 0,
                             'Packed__c': false }"/>
    
    
    <!-- NEW  FORM -->
    <lightning:layout >
        <lightning:layoutItem padding="around-small" size="6">
            
            <!-- CREATE NEW CAMPING ITEM -->
            <div aria-labelledby="newitemform">
                
                <!-- BOXED AREA -->
                <fieldset class="slds-box slds-theme--default slds-container--small">
                    
                    <legend id="newexpenseform" class="slds-text-heading--small 
                                                       slds-p-vertical--medium">
                        Add Camping Item
                    </legend>
                    
                    <!-- CREATE NEW ITEM FORM -->
                    <form class="slds-form--stacked">          
                        <lightning:input aura:id="itemform" label="Item Name"
                                         name="itemname"
                                         value="{!v.newItem.Name}"
                                         required="true"
                                         messageWhenValueMissing="Must have an item name"/> 
                        <lightning:input type="number" aura:id="itemform" label="Quantity"
                                         name="itemquantity"
                                         min="1"
                                         step="1"
                                         value="{!v.newItem.Quantity__c}"
                                         messageWhenRangeUnderflow="Enter an amount that's at least 1"/>
                        <lightning:input type="number" aura:id="itemform" label="Price"
                                         name="itemprice"
                                         formatter="currency"
                                         step="0.01"
                                         value="{!v.newItem.Price__c}"/>
                        <lightning:input type="checkbox" aura:id="itemform" label="Packed?"
                                         name="itempacked"
                                         checked="{!v.newItem.Packed__c}"/>
                        <lightning:button label="Create Item" 
                                          class="slds-m-top--medium"
                                          variant="brand"
                                          onclick="{!c.clickCreateItem}"/>
                    </form>
                    <!-- / CREATE NEW ITEM FORM -->
                    
                </fieldset>
                <!-- / BOXED AREA -->
                
            </div>
            <!-- / CREATE NEW ITEM -->
            
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW ITEM FORM -->
    
    <lightning:card title="Camping Items">
        <p class="slds-p-horizontal--small">
            
            
            <aura:iteration items="{!v.items}" var="item">
				{!item.Name}, {!item.Quantity__c}, {!item.Price__c}                 
                <c:campingListItem item="{!item}"/>
            </aura:iteration>
            
        </p>
        
    </lightning:card>

    
</aura:component>

campingListController.js
 

({
    // Load items from Salesforce
    doInit: function(component, event, helper) {

        // Create the action
        var action = component.get("c.getItems");

        // Add callback behavior for when response is received
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.items", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });

        // Send action off to be executed
        $A.enqueueAction(action);
    },
    
    
    clickCreateItem : function(component, event, helper) {
        var validItem = component.find('itemform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid(); 
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        
        // If we pass error checking, do some real work
        if(validItem){
            // Create the new expense
            var newItem = component.get("v.newItem");
            console.log("Create New Camping Item: " + JSON.stringify(newItem));
                 
            //
            // Add the new item to the list
            // 
            
            var theItems = component.get("v.items");
            
            // Copy the Item to a new object
            // THIS IS A DISGUSTING, TEMPORARY HACK
            var newItem = JSON.parse(JSON.stringify(newItem));
            
            
            console.log("Items before 'create': " + JSON.stringify(theItems));
            theItems.push(newItem);
            component.set("v.items", theItems);
            console.log("Items after 'create': " + JSON.stringify(theItems)); 
            
            
            //
            //reset the newItem value provider with a blank sObjectType of Camping_Item__c    
            //
            component.set("v.newItem",{'sobjectType':'Camping_Item__c',
                'Name': '',
                'Quantity__c': 0,
                'Price__c': 0,
                'Packed__c': false});  
        }
    },
    
        dispitem : function(component, event, helper) {
        var theitem = component.get("v.item");
        console.log("The Item in CampingList durint iteration: " + JSON.stringify(theitem));
    }
})

CampingListController.apxc
 

public with sharing class CampingListController {

    @AuraEnabled
    public static List<Camping_Item__c> getItems() {
        
        // Check to make sure all fields are accessible to this user
        String[] fieldsToCheck = new String[] {
            'Id', 'Name', 'Price__c', 'Quantity__c', 'Packed__c'
        };
        
        Map<String,Schema.SObjectField> fieldDescribeTokens = 
            Schema.SObjectType.Camping_Item__c.fields.getMap();
        
        for(String field : fieldsToCheck) {
            if( ! fieldDescribeTokens.get(field).getDescribe().isAccessible()) {
                throw new System.NoAccessException();
                //return null;
            }
        }
        
        // OK, they're cool, let 'em through
        List<Camping_Item__c> campinglist = [SELECT Id, Name, Price__c, Quantity__c, Packed__c 
                FROM Camping_Item__c];
        
        // 
        // 
        // REMOVE LATER - I am able to see the 3 records that were already in the database
        // 
        // 
        for (Camping_Item__c myitem: campinglist){
            system.debug('Item: ' + myitem + '\n');
        }
       	
        return campinglist;
    }

    
    @AuraEnabled
    public static Camping_Item__c saveItem (Camping_Item__c item) {
        // Perform isUpdatable() checking first, then
        upsert item;
        return item;
    }

}

campingListItem.cmp

<aura:component >
   
    <aura:handler name="init" value="{!this}" action="{!c.dispitem}"/>

    <aura:attribute name="item" type="Camping_Item__c"/>
    
    <lightning:card title="{!item.Name}" iconName="action:goal"
                    class="{!item.Packed__c ?
                           'slds-theme--success' : ''}">
        
        <p class="slds-text-heading--medium slds-p-horizontal--small">
            Price: <lightning:formattedNumber value="{!item.Price__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
            Quantity: {!item.Quantity__c}
        </p>
        <p>
            <lightning:input type="toggle" 
                             label="Packed?"
                             name="packed"
                             class="slds-p-around--small"
                             checked="{!item.Packed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.packItem}"/>
        </p>
    </lightning:card>
 
</aura:component>

campingListItemController.js
 

({
	packItem : function(component, event, helper) {
		var btn = event.getSource(); //the button
        
        //set Packed as true     
        var myitem = component.get("v.item",true);
        myitem.Packed__c = true;
        component.set("v.item", myitem);
        
        //disable the button
        btn.set("v.disabled", true);
	},
    
    dispitem : function(component, event, helper) {
        var theitem = component.get("v.item");
        console.log("The Item in CampingListItem: " + JSON.stringify(theitem));
        system.debug('In dispitem, the item is: ' + theitem);
    }
})

With the above code, I get the following error.  I don't even get to the point where I can enter any additional items using the form.




Thank you,
Vipul