Unable to get property 'push' of undefined or null reference - Lightning component error

Question

I am making a simple component to insert account with a contact. I am getting the following error.

"Unable to get property 'push' of undefined or null reference".

Concepts did not go right with me. Here is my code.

Component

<aura:component controller="NewAccount" implements="flexipage:availableForAllPageTypes">
    <aura:handler name="init" action="{!c.CreateAccount}" value="{!this}"/>
    <aura:attribute name="Account" type="Account"/> 
    <aura:attribute name="newAccount" type="Account" default="{'sobject' : 'Account','name' : '', 'phone' : '', 'website':'', 'fax' : ''}" />
    <aura:attribute name="newContact" type="Contact" default="{'sobject' : 'Contact' , 'FisrtName' : '' , 'LastName' : '' , 'Email' : '' , 'Title' : '' , 'Phone' : ''}"></aura:attribute>


    <p class="slds-text-heading--label">Create New Account</p>

    <div class="slds-col slds-col--padded slds-p-top--large">

        <ui:inputtext aura:id="Name" label="Name" value="{!v.newAccount.name}" required="true"/>

        <ui:inputText aura:id="Email" label="Email" value="{!v.newAccount.Email}" required = "true" />

        <ui:inputText aura:id="Website" label="Website" value="{!v.newAccount.website}" />

        <ui:inputText aura:id="Fax" label="Fax" value="{!v.newAccount.fax}" />

        <ui:inputtext aura:id="Phone" label="Phone" value="{!v.newAccount.phone}" />

        <ui:inputText aura:id="Billing City" label="Billing City" value="{!v.newAccount.BillingCity}" />

        <ui:inputText aura:id="Billing Street" label="Billing Street" value="{!v.newAccount.BillingStreet}" />

        <ui:inputText aura:id="Billing Country" label="Billing Country" value="{!v.newAccount.BillingCountry}" />
        <br></br>

        <ui:button label="Create Account" press="{!c.CreateAccount}"/>

    </div>
    <br></br>
    <p class="slds-text-heading--label">Create New Contact</p>

    <div class="slds-col slds-col--padded slds-p-top--large">

        <ui:inputText aura:id = "FirstName" label = "First Name" value="{!v.newContact.FirstName}"></ui:inputText>

        <ui:inputText aura:id = "LastName" label = "Last Name" value="{!v.newContact.LastName}" required = "true"></ui:inputText>  

        <ui:inputText aura:id = "EmailC" label = "Email" value="{!v.newContact.Email}"></ui:inputText>  

        <ui:inputText aura:id = "Phone" label = "Phone" value="{!v.newContact.Phone}"></ui:inputText>    

        <ui:inputText aura:id = "Title" label = "Title" value="{!v.newContact.Title}" ></ui:inputText>    
        <br></br>

        <ui:button label = "Create Contact" press = "{!c.createContact}"></ui:button>

    </div> 
</aura:component>

Client Side Controller

 ({
    CreateAccount : function(component, event, helper) 
    {
        var validAcc = true;
        var name = component.find("Name");
        var nm = name.get("v.value");
        var email = component.find("Email");
        var em = email.get("v.value");
        if( $A.util.isEmpty(nm))
        {
            validAcc = false;
            name.set("v.errors", [{message:"Name cannot be blank."}]);            
        }
        if( $A.util.isEmpty(em))
        {
            validAcc = false;
            email.set("v.errors", [{message:"Email cannot be blank."}]);                                              
        }
        if(validAcc)
        {
            var newAccount = component.get("v.newAccount");
            helper.createAccount(component, newAccount);
        }       

    }    
})

({
    createContact : function(component, event, helper) 
    {
    }

})

Server Side Controller

Public with Sharing class NewAccount
{
    @AuraEnabled
    Public Static Account SaveAccount(Account acc)
    { 
        upsert acc;
        return acc;
    }  
}

Helper

  ({    createAccount : function(component, account) 
    {
         var theAccounts = component.get("v.Account");

         var newAccount = JSON.parse(JSON.stringify(account));

         theAccounts.push(newAccount);

         component.set("v.Account", theAccounts);
         var action = component.get("c.SaveAccount");

        action.setParams
        ({

             "acc": account

        });

        action.setCallback(this, function(response){

        var state = response.getState();

        if (component.isValid() && state === "SUCCESS") {

            var accounts = component.get("v.Account");

            accounts.push(response.getReturnValue());

            component.set("v.Account", accounts);

        }

    });

    $A.enqueueAction(action);
            } })

Answer 1

This is because you don't have any default value for your Account attribute, so the value is null. It should be:

<aura:attribute name="Account" type="Account" default="{'sobject' : 'Account'}"/>

Also, if you use the push method, your attribute should be a list:

<aura:attribute name="Account" type="Account[]" />