+ Start a Discussion
Caleb KuesterCaleb Kuester 

Trailhead CampingList Component Stuff

Greetings! I'm at it again. This time, I have working code. 

The problem is: 
"Challenge Not yet complete... here's what's wrong: 
The campingList component isn't iterating the array of 'items' and creating 'campingListItem' components."

So for starters, I can say that it is. 
My campingList component contains this code. 
<aura:iteration items="{!v.items}" var="item">
     <c:campingListItem campingListItem="{!item}"/>
</aura:iteration>
I don't know how it could possibly resolve this problem any better than "correct." I know that it's iterating through them because:
 evidence
^This is after a couple of entries. 

Is this a common problem? Does anybody else have experience with this? I didn't post all of my code to keep this as short as possible. If required, I can certainly do so. 

Additionally, the entirety of the code that generates this is directly from the Trailhead example... copy/paste, but with the variable names renamed appropriately. If my code fails to meet their criteria, then so does theirs. 
SandhyaSandhya (Salesforce Developers) 
Hi 

There are different solutions in the below post for similar discussion I was able to pass this challenge from below post.Please refer that can help you to solve your issue.

https://developer.salesforce.com/forums/?id=906F0000000kDD0IAM

This code worked for me.

campingList.cmp:
<aura:component >
    
	<aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{'sobjectType' : 'Camping_Item__c',
                               'Quantity__c' : 0,
                               'Price__c' : 0}"/>
  <!-- BOXED AREA -->
  <fieldset class="slds-box slds-theme--default slds-container--small">

    <legend id="newCampItemForm" 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="campItemName" label="Camping 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">
          <ui:inputCheckbox aura:id="packed" label="Packed?"
              class="slds-checkbox"
              labelClass="slds-form-element__label"
              value="{!v.newItem.Packed__c}"/>
      </div>

      <div class="slds-form-element">
          <ui:button label="Create Camping Item"
              class="slds-button slds-button--brand"
              press="{!c.clickCreateItem}"/>
      </div>

    </form>
    <!-- / CREATE NEW CAMPING ITEM FORM -->

  </fieldset>
        <div class ="slds-card slds-p-top--meduim">
        <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>
    <!-- i do not think this html is needed any longer
	<ol>  
        <li>Bug Spray</li>
        <li>Bear Repellant</li>
        <li>Goat Food</li>
    </ol>-->
</aura:component>


campingController.cmp:
 
({
	clickCreateItem : function(component, event, helper) {
		
        var validItem = true;
        
        //  get and verify the name is set
        var nameField = component.find("campItemName");
        var campname = nameField.get("v.value");
        if ($A.util.isEmpty(campname))
        {
            validItem = false;
            nameField.set("v.errors", [{message: "Camping Item name can't be blank."}]);
        }
        else
        {
            nameField.set("v.errors", null);
        }
        
        //  check quantity
        var quantityField = component.find("quantity");
        var quantityValue = quantityField.get("v.value");
        if ($A.util.isEmpty(quantityValue) || quantityValue == 0)
        {
            validItem = false;
            quantityField.set("v.errors", [{message : "Quantity cannot be 0 or blank."}]);
        }
        else
        {
            quantityField.set("v.errors", null);
        }
        
        //  check price
        var priceField = component.find("price");
        var priceValue = priceField.get("v.value");
        if ($A.util.isEmpty(priceValue) || priceValue == 0)
        {
            validItem = false;
            priceField.set("v.errors", [{message : "Price cannot be 0 or blank."}]);
        }
        else
        {
            priceField.set("v.errors", null);
        }
        
        if (validItem)
        {
            //  gets refernce to view's newItem attribute
            var newItemRef = component.get("v.newItem");
            console.log("Create Camping Item: " + JSON.stringify(newItemRef));
            
            //helper.createItem(component, newItem);
            
            // **** begin helper class code ****
            // note that i originally created helper class to perform the logic below
            // but it appears as though the challenge is expecting you NOT to use helper class
            // which would be why i was getting challenge error while using it
            var theItems = component.get("v.items");
 
            // Copy the expense to a new object
            // THIS IS A DISGUSTING, TEMPORARY HACK
            var newItem = JSON.parse(JSON.stringify(newItemRef));    
            theItems.push(newItem);
            component.set("v.items", theItems);
            //  *******  end helper class code *********
            
            //  this will reset the view's newItem object 
            //  to a be a blank sobject of type Camping_Item__c
            //  credit to: Shobhit Saxena
            component.set("v.newItem", 
                          {'sobjectType' : 'Camping_Item__c',
                           'Name' : '',
                           'Quantity__c' : 0,
                           'Price__c' : 0,
                           'Packed__c' : false});
                           
        }
        
	}
})


campingItem.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>

Hope this helps you!

Please accept my solution as Best Answer if my reply was helpful. It will make it available for other as the proper solution.
 
Thanks and Regards
Sandhya

 
Caleb KuesterCaleb Kuester
That did work after I merged two of my components into a single file, then created separate controller/helper for the campingList.cmp, which did not have much of the code listed here. 

I don't know what exactly went wrong, but they do exactly the same thing. I want to find out what may have gone wrong, but realistically, I won't have the time and I just found a separate (minor) issue where Trailhead is providing outdated information. 

Thanks, 
-Caleb
Try FreeTry Free
Thank you Sandhya, perfect solution!