function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Bob_zBob_z 

Lightning component Cannot read property error

I am having an issue with my lightning component or apex class.

It is a account detail page but receiving the below error. I can't seem to find the issue with my code so i am reaching out to anyone that can help me find the issue.
User-added image

Here is my controller and Component Info.

Component
<aura:component controller="AccountDetailsCtrl" implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:hasRecordId" access="global">
    <aura:attribute name="acc" type="Account"></aura:attribute>
    <aura:attribute name="recordId" type="String"></aura:attribute>
    
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>

    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    <aura:if isTrue="{!v.acc.Division__c || v.acc.Director_of_Operations__r || v.acc.Senior_Account_Manager__r || v.acc.Regional_Field_Manager_Contact__r || v.acc.Account_Manager__r}">





        <div class="slds-box">
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th class="division" scope="col">
                            <div class="slds-truncate" title="Division">Division : {!v.acc.Division__c}</div>
                        </th>
                    </tr>
                    <tr class="slds-line-height_reset">
                        <th class="title" scope="col">
                            <div class="slds-truncate" title="Title">Title</div>
                        </th>
                        <th class="name" scope="col">
                            <div class="slds-truncate" title="Name">Name</div>
                        </th>
                        <th class="email" scope="col">
                            <div class="slds-truncate" title="Email">Email</div>
                        </th>
                        <th class="phone" scope="col">
                            <div class="slds-truncate" title="Phone">Phone</div>
                        </th>
                        <th class="mobile" scope="col">
                            <div class="slds-truncate" title="Mobile">Mobile</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="slds-hint-parent">
                        <td data-label="Director of Operations title">
                            <div class="slds-truncate" title="Director of Operations">Director of Operations</div>
                        </td>
                        <td data-label="Name" class="name">
                            <div class="slds-truncate" title="{!v.acc.Director_of_Operations__r.Name}">{!v.acc.Director_of_Operations__r.Name}</div>
                        </td>
                        <td data-label="Email" class="email">
                            <div class="slds-truncate" title="{!v.acc.Director_of_Operations__r.Email}">{!v.acc.Director_of_Operations__r.Email}</div>
                        </td>
                        <td data-label="Phone" class="phone">
                            <div class="slds-truncate" title="{!v.acc.Director_of_Operations__r.Phone}">{!v.acc.Director_of_Operations__r.Phone}</div>
                        </td>
                        <td data-label="Mobile" class="mobile">
                            <div class="slds-truncate" title="{!v.acc.Director_of_Operations__r.MobilePhone}">{!v.acc.Director_of_Operations__r.MobilePhone}</div>
                        </td>
                    </tr>
                    <tr class="slds-hint-parent">
                        <td data-label="Senior Account Manager title">
                            <div class="slds-truncate" title="Senior Account Manager">Senior Account Manager</div>
                        </td>
                        <td data-label="Name" class="name">
                            <div class="slds-truncate" title="{!v.acc.Senior_Account_Manager__r.Name}">{!v.acc.Senior_Account_Manager__r.Name}</div>
                        </td>
                        <td data-label="Email" class="email">
                            <div class="slds-truncate" title="{!v.acc.Senior_Account_Manager__r.Email}">{!v.acc.Senior_Account_Manager__r.Email}</div>
                        </td>
                        <td data-label="Phone" class="phone">
                            <div class="slds-truncate" title="{!v.acc.Senior_Account_Manager__r.Phone}">{!v.acc.Senior_Account_Manager__r.Phone}</div>
                        </td>
                        <td data-label="Mobile" class="mobile">
                            <div class="slds-truncate" title="{!v.acc.Senior_Account_Manager__r.MobilePhone}">{!v.acc.Senior_Account_Manager__r.MobilePhone}</div>
                        </td>
                    </tr>
                    <tr class="slds-hint-parent">
                        <td data-label="District Manager title">
                            <div class="slds-truncate" title="District Manager">District Manager</div>
                        </td>
                        <td data-label="Name" class="name">
                            <div class="slds-truncate" title="{!v.acc.Regional_Field_Manager_Contact__r.Name}">{!v.acc.Regional_Field_Manager_Contact__r.Name}</div>
                        </td>
                        <td data-label="Email" class="email">
                            <div class="slds-truncate" title="{!v.acc.Regional_Field_Manager_Contact__r.Email}">{!v.acc.Regional_Field_Manager_Contact__r.Email}</div>
                        </td>
                        <td data-label="Phone" class="phone">
                            <div class="slds-truncate" title="{!v.acc.Regional_Field_Manager_Contact__r.Phone}">{!v.acc.Regional_Field_Manager_Contact__r.Phone}</div>
                        </td>
                        <td data-label="Mobile" class="mobile">
                            <div class="slds-truncate" title="{!v.acc.Regional_Field_Manager_Contact__r.MobilePhone}">{!v.acc.Regional_Field_Manager_Contact__r.MobilePhone}</div>
                        </td>
                    </tr>
                    <tr class="slds-hint-parent">
                        <td data-label="Account Manager title">
                            <div class="slds-truncate" title="Account Manager">Account Manager</div>
                        </td>
                        <td data-label="Name" class="name">
                            <div class="slds-truncate" title="{!v.acc.Account_Manager__r.Name}">{!v.acc.Account_Manager__r.Name}</div>
                        </td>
                        <td data-label="Email" class="email">
                            <div class="slds-truncate" title="{!v.acc.Account_Manager__r.Name}">{!v.acc.Account_Manager__r.Email}</div>
                        </td>
                        <td data-label="Phone" class="phone">
                            <div class="slds-truncate" title="{!v.acc.Account_Manager__r.Name}">{!v.acc.Account_Manager__r.Phone}</div>
                        </td>
                        <td data-label="Mobile" class="mobile">
                            <div class="slds-truncate" title="{!v.acc.Account_Manager__r.Name}">{!v.acc.Account_Manager__r.MobilePhone}</div>
                        </td>
                    </tr>
                    <tr class="slds-hint-parent">
                        <td data-label="Procurement Manager title">
                            <div class="slds-truncate" title="Procurement Manager">Procurement Manager</div>
                        </td>
                        <td data-label="Name" class="name">
                            <div class="slds-truncate" title="{!v.acc.Customer_Procurement_Mangager__r.Name}">{!v.acc.Customer_Procurement_Mangager__r.Name}</div>
                        </td>
                        <td data-label="Email" class="email">
                            <div class="slds-truncate" title="{!v.acc.Customer_Procurement_Mangager__r.Name}">{!v.acc.Customer_Procurement_Mangager__r.Email}</div>
                        </td>
                        <td data-label="Phone" class="phone">
                            <div class="slds-truncate" title="{!v.acc.Customer_Procurement_Mangager__r.Name}">{!v.acc.Customer_Procurement_Mangager__r.Phone}</div>
                        </td>
                        <td data-label="Mobile" class="mobile">
                            <div class="slds-truncate" title="{!v.acc.Customer_Procurement_Mangager__r.Name}">{!v.acc.Customer_Procurement_Mangager__r.MobilePhone}</div>
                        </td>
                    </tr>
                    <tr class="slds-hint-parent">
                        <td data-label="Finance Contact title">
                            <div class="slds-truncate" title="Procurement Manager">Finance Contact</div>
                        </td>
                        <td data-label="Name" class="name">
                            <div class="slds-truncate" title="{!v.acc.Customer_Finance_Contact__r.Name}">{!v.acc.Customer_Finance_Contact__r.Name}</div>
                        </td>
                        <td data-label="Email" class="email">
                            <div class="slds-truncate" title="{!v.acc.Customer_Finance_Contact__r.Name}">{!v.acc.Customer_Finance_Contact__r.Email}</div>
                        </td>
                        <td data-label="Phone" class="phone">
                            <div class="slds-truncate" title="{!v.acc.Customer_Finance_Contact__r.Name}">{!v.acc.Customer_Finance_Contact__r.Phone}</div>
                        </td>
                        <td data-label="Mobile" class="mobile">
                            <div class="slds-truncate" title="{!v.acc.Customer_Finance_Contact__r.Name}">{!v.acc.Customer_Finance_Contact__r.MobilePhone}</div>
                        </td>
                    </tr>
                    <tr class="slds-hint-parent">
                        <td data-label="Facilities Manager title">
                            <div class="slds-truncate" title="Procurement Manager">Facilities Manager</div>
                        </td>
                        <td data-label="Name" class="name">
                            <div class="slds-truncate" title="{!v.acc.Customer_Facilities_Manager__r.Name}">{!v.acc.Customer_Facilities_Manager__r.Name}</div>
                        </td>
                        <td data-label="Email" class="email">
                            <div class="slds-truncate" title="{!v.acc.Customer_Facilities_Manager__r.Name}">{!v.acc.Customer_Facilities_Manager__r.Email}</div>
                        </td>
                        <td data-label="Phone" class="phone">
                            <div class="slds-truncate" title="{!v.acc.Customer_Facilities_Manager__r.Name}">{!v.acc.Customer_Facilities_Manager__r.Phone}</div>
                        </td>
                        <td data-label="Mobile" class="mobile">
                            <div class="slds-truncate" title="{!v.acc.Customer_Facilities_Manager__r.Name}">{!v.acc.Customer_Facilities_Manager__r.MobilePhone}</div>
                        </td>
                    </tr>


                </tbody>
            </table>
        </div>

        <!-- SITES -->
        <div style="height: 500px">
            <lightning:datatable
                    keyField="Name"
                    data="{! v.data }"
                    columns="{! v.columns }"
                    hideCheckboxColumn="true"/>
        </div>
        <!-- <div class="slds-box">
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th class="division" scope="col">
                            <div class="slds-truncate" title="Site2">Sites : </div>
                        </th>
                    </tr>
                    <tr class="slds-line-height_reset">
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Site">Site</div>
                        </th>
                        <th class="name" scope="col">
                            <div class="slds-truncate" title="Name">Senior Account Manager</div>
                        </th>
                        <th class="email" scope="col">
                            <div class="slds-truncate" title="Name">Account Manager</div>
                        </th>
                        <th class="phone" scope="col">
                            <div class="slds-truncate" title="Name">Regional Field Manager</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.acc.Site__r}" var="item">
                        <tr class="slds-hint-parent">
                            <td data-label="Name">
                                <div class="slds-truncate" title="Name"><ui:outputText value="{!item.Name}"/></div>
                            </td>
                            <td data-label="Name" class="name">
                                <div class="slds-truncate" title="Name"><ui:outputText value="{!item.Senior_Account_Manager__r.Name}"/></div>
                            </td>
                            <td data-label="Name" class="email">
                                <div class="slds-truncate" title="Name"><ui:outputText value="{!item.Account_Manager__r.Name}"/></div>
                            </td>
                            <td data-label="Name" class="phone">
                                <div class="slds-truncate" title="Name"><ui:outputText value="{!item.Regional_Field_Manager__r.Name}"/></div>
                            </td>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </div> -->



    </aura:if>
</aura:component>

Controller on the component.bundle
({
    doInit : function(component, event, helper) {

        component.set('v.columns', [
            {label: 'Site', fieldName: 'Name', type: 'text', sortable: true},
            {label: 'Senior Account Manager', fieldName: 'Senior_Account_Manager__r_Name', type: 'text'},
            {label: 'Account Manager', fieldName: 'Account_Manager__r_Name', type: 'text'},
            {label: 'Regional Field Manager', fieldName: 'Regional_Field_Manager__r_Name', type: 'text'}
        ]);

        helper.call(component, component.get('c.getAccount')).then(function(res){
            console.log(res);
            var rows = res[0].Site__r;
            /* Flatten list of rows for display in lightning datatable */
            for (var i = 0; i < rows.length; i++) { 
                var row = rows[i]; 
                //as data columns with relationship __r can not be displayed directly in data table, so generating dynamic columns 
                if (row.Senior_Account_Manager__r) { 
                     //here you assign the related data to new variables
                    if (row.Senior_Account_Manager__r) row.Senior_Account_Manager__r_Name = row.Senior_Account_Manager__r.Name; 
                    if (row.Account_Manager__r) row.Account_Manager__r_Name = row.Account_Manager__r.Name;
                    if (row.Regional_Field_Manager__r) row.Regional_Field_Manager__r_Name = row.Regional_Field_Manager__r.Name;
                } 
            }
            if(res && res.length > 0) {
                component.set('v.acc',res[0]);
                component.set('v.data', rows);
            }
        })
    }
})

Apex Class
public without sharing class AccountDetailsCtrl {

    @AuraEnabled
    public static Object getAccount(){

        return [
            SELECT Id, Division__c,
                Account_Manager__r.Name, Account_Manager__r.Email, Account_Manager__r.Phone, Account_Manager__r.MobilePhone,
                Senior_Account_Manager__r.Name, Senior_Account_Manager__r.Email, Senior_Account_Manager__r.Phone, Senior_Account_Manager__r.MobilePhone,
                Regional_Field_Manager_Contact__r.Name, Regional_Field_Manager_Contact__r.Email, Regional_Field_Manager_Contact__r.Phone, Regional_Field_Manager_Contact__r.MobilePhone,
                Director_of_Operations__r.Name, Director_of_Operations__r.Email, Director_of_Operations__r.Phone, Director_of_Operations__r.MobilePhone,

                Customer_Procurement_Mangager__r.Name, Customer_Procurement_Mangager__r.Email, Customer_Procurement_Mangager__r.Phone, Customer_Procurement_Mangager__r.MobilePhone,
                
                Customer_Finance_Contact__r.Name, Customer_Finance_Contact__r.Email, Customer_Finance_Contact__r.Phone, Customer_Finance_Contact__r.MobilePhone,
                
                Customer_Facilities_Manager__r.Name, Customer_Facilities_Manager__r.Email, Customer_Facilities_Manager__r.Phone, Customer_Facilities_Manager__r.MobilePhone,
                (SELECT Id, Name,
                    Senior_Account_Manager__r.Name, Senior_Account_Manager__r.Email, Senior_Account_Manager__r.MobilePhone, Senior_Account_Manager__r.Phone,
                    Account_Manager__r.Name, Account_Manager__r.Email, Account_Manager__r.MobilePhone, Account_Manager__r.Phone,
                    Regional_Field_Manager__r.Name, Regional_Field_Manager__r.Email, Regional_Field_Manager__r.MobilePhone, Regional_Field_Manager__r.Phone
                FROM Account.Site__r)

            FROM Account
            WHERE Id =:[SELECT AccountId FROM User WHERE Id =:UserInfo.getUserId()].AccountId
        ];
    }
}


 
Angel Robles MAngel Robles M
Hey Bob_z, I would say the problem might be at line number 13 of your controller, the first entry of the array variable "res" might be undefined.
MantoManto
Are you sure you are passing the field Account.Site__r back in your query result to js?