Not able to display Lookup data to lightning-datatable

Question

I am not able to display Lookup data on a data-table - contact__r.Phone. I have tried following Flatten data to display it using lightning datatable in LWC to create a prepared list for the datatable columns, but no luck.

JS:

import { LightningElement, wire } from 'lwc';
import getLog from '@salesforce/apex/FridgeLogsController.getLog';

const columns = [
    {label: 'Timestamp', fieldName: 'LastModifiedDate', type: 'text'},
    {label: 'Employee Name', fieldName: 'employeeName__c', type: 'text'},
    {label: 'Fridge ID', fieldName: 'fridgeId__c', type: 'text'},
    {label: 'Phone #', fieldName: 'contactPhone', type: 'phone'},
];

export default class ExerciseTrigger extends LightningElement {
    columns = columns;
    log;

    @wire(getLog) logList(result) {
        if (result.data) {
            // this.log = result.data;
            this.error = undefined;

            let preparedArr = [];
            result.data.forEach(record => {
                let preparedRec = {};
                preparedRec.LastModifiedDate = record.LastModifiedDate;
                preparedRec.employeeName__c = record.employeeName__c;
                preparedRec.fridgeId__c = record.fridgeId__c;
                preparedRec.contactPhone = record.contact__r.Phone;

                preparedArr.push(preparedRec);
            });
            this.log = preparedArr;
            
        } else if (result.data) {
            this.log = result.error;
            this.error = undefined;
        } 
    }
}

With preparedRec.contactPhone = record.contact__r.Phone;, I get a completely blank data-table. If I comment it out, I get all the columns data except for the Phone#.

HTML:

    <template>
    <lightning-card title="Fridge Log" icon-name="standard:service_territory"> 
        <!-- Lightning datatable -->
        <div class="slds-m-around_medium" style="height: 300px;">
            <template if:true={log}>
                <lightning-datatable
                    key-field="Id"
                    data={log}
                    columns={columns}
                    hide-checkbox-column="true">
                </lightning-datatable>
            </template>
        </div>
    </lightning-card>
</template>

CLS:

public with sharing class FridgeLogsController {
    @AuraEnabled(cacheable=true)
    public static List<Fridge_Logs__c> getLog() {
        return [
            SELECT LastModifiedDate, employeeName__c, fridgeId__c, contact__r.Phone
            FROM Fridge_Logs__c
            ORDER BY LastModifiedDate DESC
        ];
    }
}

Trigger:

trigger FridgeTrigger on Fridge_Log__e (after insert) {
    // List to insert
    list<Fridge_Logs__c> dataToInsert = new List<Fridge_Logs__c>();
    
    for (Fridge_Log__e event : Trigger.New) {
        System.debug('Data ID from emitter: ' + event.badgeId__c);
        // Record to add
        Fridge_Logs__c data = new Fridge_Logs__c();
        // Store event into variable for storing
        data.badgeId__c = event.badgeId__c;
        data.employeeName__c = event.employeeName__c;
        data.fridgeId__c = event.fridgeId__c;
        List<Contact> lookupList = [SELECT Id FROM Contact WHERE Name = :data.employeeName__c ];
        data.Contact__c = lookupList[0].Id;
        dataToInsert.add(data);
        
        if(!dataToInsert.isEmpty()){
            // Record data in db
            insert dataToInsert;
        } 
    }
}

Query results are displaying the Phone#:

thanks

Answer 1

Solved, preparedRec.contactPhone = record.Contact__r.Phone;

Adjustment: Uppercase