+ Start a Discussion
Caleb KuesterCaleb Kuester 

Alright, I Give Up

I am working with a Lightning Component Trailhead example: https://trailhead.salesforce.com/lex_dev_lc_basics/lex_dev_lc_basics_forms

Don't worry about providing a free "passing grade," this is just the copy/pasted provided example. I wish to understand this prior to moving to the challenge. 

The components and controller and helper are as follows: 
expenseApp.app (provides the styles correctly):
<aura:application >
    <ltng:require styles="{!$Resource.SLDS +
         '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>
    <div class="slds">
        <c:expenses />
    </div>
</aura:application>

expenses.cmp: 
<aura:component >
    <aura:attribute name="newExpense" type="Expense__c"
                    default="{ 'sobjectType': 'Expense__c',
                             'Name': '',
                             'Amount__c': 0,
                             'Client__c': '',
                             'Date__c': '',
                             'Reimbursed__c': false }"/>
    <div class="slds-page-header" role="banner">
        <div class="slds-grid">
            <div class="slds-col">
                <p class="slds-text-heading--label">Expenses</p>
                <h1 class="slds-text-heading--medium">My Expenses</h1>
            </div>
        </div>
    </div>
    <!-- / PAGE HEADER -->
    <!-- NEW EXPENSE FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">
        <!-- [[ expense form goes here ]] -->
    </div>
    <div class="slds-col slds-col--padded slds-p-top--large">
        <div aria-labelledby="newexpenseform">
            <!-- 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 Expense
                </legend>
                <!-- CREATE NEW EXPENSE FORM -->
                <form class="slds-form--stacked">
                    <div class="slds-form-element slds-is-required">
                        <div class="slds-form-element__control">
                            <ui:inputText aura:id="expname" label="Expense Name"
                                          class="slds-input"
                                          labelClass="slds-form-element__label"
                                          value="{!v.newExpense.Name}"
                                          required="true"/>
                        </div>
                    </div>
                    <div class="slds-form-element slds-is-required">
                        <div class="slds-form-element__control">
                            <ui:inputNumber aura:id="amount" label="Amount"
                                            class="slds-input"
                                            labelClass="slds-form-element__label"
                                            value="{!v.newExpense.Amount__c}"
                                            required="true"/>
                            
                        </div>
                    </div>
                    <div class="slds-form-element">
                        <div class="slds-form-element__control">
                            <ui:inputText aura:id="client" label="Client"
                                          class="slds-input"
                                          labelClass="slds-form-element__label"
                                          value="{!v.newExpense.Client__c}"
                                          placeholder="ABC Co."/>
                        </div>
                    </div>
                    <div class="slds-form-element">
                        <div class="slds-form-element__control">
                            <ui:inputDate aura:id="expdate" label="Expense Date"
                                          class="slds-input"
                                          labelClass="slds-form-element__label"
                                          value="{!v.newExpense.Date__c}"
                                          displayDatePicker="true"/>
                        </div>
                    </div>
                    <div class="slds-form-element">
                        <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
                                          class="slds-checkbox"
                                          labelClass="slds-form-element__label"
                                          value="{!v.newExpense.Reimbursed__c}"/>
                    </div>
                    <div class="slds-form-element">
                        <ui:button label="Create Expense"
                                   class="slds-button slds-button--brand"
                                   press="{!c.clickCreateExpense}"/>
                    </div>
                </form>
                <!-- / CREATE NEW EXPENSE FORM -->
            </fieldset>
            <!-- / BOXED AREA -->
        </div>
        <!-- / CREATE NEW EXPENSE -->
    </div>
    <!-- / NEW EXPENSE FORM -->
	<br/>
    <c:expensesList expenses="{!v.expenses}"/>
</aura:component>

expensesController.js: 
({
    clickCreateExpense: function(component, event, helper) {

        // Simplistic error checking
        var validExpense = true;

        // Name must not be blank
        var nameField = component.find("expname");
        var expname = nameField.get("v.value");
        if ($A.util.isEmpty(expname)){
            validExpense = false;
            nameField.set("v.errors", [{message:"Expense name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }

        // ... hint: more error checking here ...

        // If we pass error checking, do some real work
        if(validExpense){
            // Create the new expense
            var newExpense = component.get("v.newExpense");
            console.log("Create expense: " + JSON.stringify(newExpense));
            helper.createExpense(component, newExpense);
        }
    }
})

expensesHelper.js: 
({
    createExpense: function(component, expense) {
        var theExpenses = component.get("v.expenses");
        // Copy the expense to a new object
        // THIS IS A DISGUSTING, TEMPORARY HACK
        var newExpense = JSON.parse(JSON.stringify(expense));
 		console.log("Create expense is defined: " +JSON.stringify(newExpense)); 
        theExpenses.push(expense);
        component.set("v.expenses", theExpenses);
    }
})

expenseItem.cmp: 
<aura:component >

    <aura:attribute name="expense" type="Expense__c"/>

    <p>Amount:
        <ui:outputCurrency value="{!v.expense.Amount__c}"/>
    </p>
    <p>Client:
        <ui:outputText value="{!v.expense.Client__c}"/>
    </p>
    <p>Date:
        <ui:outputDate value="{!v.expense.Date__c}"/>
    </p>
    <p>Reimbursed?:
        <ui:outputCheckbox value="{!v.expense.Reimbursed__c}"/>
    </p>

</aura:component>

expensesList.cmp: 
<aura:component >
	<aura:attribute name="expenses" type="Expense__c[]" default ="{[v.firstExpense, v.firstExpense, v.firstExpense]}"/>
    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Expenses</h3>
        </header>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.expenses}" var="expense">
                    <c:expenseItem expense="{!expense}"/>
                </aura:iteration>
            </div>
        </section>
    </div>
</aura:component>

The screen: 
lightning component
the error (when adding an item): 
User-added image

The console: 
User-added image

So it looks like there is a well-defined object that is intended to be pushed into the array. I tried to remove the JSON.stringify, prior to the push, but that created the same error. 

Any assistance would be helpful. 
 
sfdcMonkey.comsfdcMonkey.com
hi 

you got this error because your component are not connect with apex class that save your data in salesforce object
go to below link and add apex controller in your component
https://trailhead.salesforce.com/lex_dev_lc_basics/lex_dev_lc_basics_server
Thanks 
mark it best answer if it helps you :)
Caleb KuesterCaleb Kuester
I see what you were getting at. I had realized that I did not follow the instructions completely. Additionally, there was a second (and probably a third) error within the provided code.