0

I'm trying to build a table that includes 2 fields from a related record (contact Email, Contacts Mobile) using the wire method.

Here is the Apex class:

  @AuraEnabled(cacheable = true)
    public static List <Opportunity__c> GetOps(Decimal minRentPrice, Decimal maxRentPrice, String zone, String opType,String postCode,String city, String comOrRes, Decimal minSalePrice, Decimal maxSalePrice ) {
        return [SELECT Name, Id, Phone__c,Email__c,Contact__c,Contact__r.Email,Contact__r.MobilePhone, Description__c,Specific_Area_Size__c,CreatedDate,Postcode_City__c,Type__c,   Price_Point__c, Type_Of_Property__c  FROM Opportunity__c 
        WHERE ((Price_Point__c <=:maxRentPrice AND Price_Point__c >=:minRentPrice)  OR (Price_Point__c <=: maxSalePrice AND Price_Point__c >=: minSalePrice)) AND Type__c =:opType AND Type_Of_Property__c =:comOrRes AND Postcode_City__c!=null 
        AND (Postcode_City__c LIKE :city OR Postcode_City__c LIKE:postCode) AND Exclude_from_enquiry_matches__c = False ];

    }

Js wire method:

 @track error;
 @track data =[];

 @wire(getOps,{minRentPrice:'$minRentPrice',zone:'$zone',opType:'$opType',
    minSalePrice:'$minSalePrice',maxRentPrice:'$maxRentPrice',maxSalePrice:'$maxSalePrice',comOrRes:'$comOrRes',area:'$area',city:'$city',postCode:'$postCode'})
    wiredListings({ error, data }) {
        if (data) {
            let opList = [];
            data.forEach((row) =>{
                let dataline = {};
                dataline.opLink = '/'+row.Id;
                dataline.Name = row.Name;
                dataline.cityPostcode = row.Postcode_City__c;
                dataline.pricePoint = row.Price_Point__c;
                dataline.description = row.Description__c;
                **dataline.mobile = row.Contact__r.MobilePhone;
                dataline.email = row.Contact__r.Email;**
                
                

                opList.push(dataline);
                console.log(opList);
            })
            this.data = opList;
            this.error = undefined;

        } else if (error) {
            this.error = error;
            this.ops = undefined;
        }
    }

and HTML:

<template>
    <lightning-button variant="Brand"  class="slds-align_absolute-center" label="Enquiry Match" title="Open popup" onclick={showModalBox}>
    </lightning-button>
    <template if:true={isShowModal}>
        <button class="slds-m-bottom_x-small" onclick={hideModalBox} title="Close">
            <lightning-icon icon-name="utility:close" size="small"></lightning-icon>
            <span class="slds-assistive-text">Close</span>
        </button>
        <table class="tblColPad" border="1" cellpadding="5" cellspacing="5" style="border-collapse:collapse;">
            <tr>
                <th>Name</th>
                <th>City / Postcode</th>
                <th>Price Point</th>
                <th>Description</th>
                <th>Mobile</th>
                <th>Email</th>
                <th>Notify</th>
            </tr>
        <template for:each={data} for:item="op">
            <tr key={op.Contact__c}>
                <td><a href={op.opLink} target="_blank">{op.Name}</a></td>
                <td>{op.cityPostcode}</td>
                <td><lightning-formatted-number format-style="currency" value={op.pricePoint}></lightning-formatted-number></td>
                <td>{op.description}</td>
                <td>{op.mobile}</td>
                <td>{op.email}</td>
                <td><lightning-button
                    data-id={op.Contact__c}
                    class="slds-theme_brand" 
                    value={op.Contact__c} 
                    label="E-Mail"
                    variant={buttonVariant}
                    onclick={handleClick}>
                </lightning-button></td>
           </tr>
           </template>
        </table>
    </template>
</template>

I'm 99% sure I have used this same method before on a LWC Datatable using columns and it worked fine, But I could be wrong. The Error I am getting in the console is : [Cannot read properties of undefined (reading 'MobilePhone').

Any help on where I am going wrong would be fantastic thank you.

Error in console log is [Cannot read properties of undefined (reading 'MobilePhone')]

2
  • 1
    Hi Mike, have you verified that the Opportunity records that you're using to test have the Contact field populated? That error looks like it's being thrown as the code is trying to read the MobilePhone property of a null value. Commented Dec 16, 2022 at 3:29
  • @CallumMacErlich Thanks for that, 4 had contacts attached one did not which caused my table to fail. Commented Dec 16, 2022 at 3:34

1 Answer 1

1

Glad to hear that it was a data issue. To prevent these issues impacting the table in the future, I'd recommend using the ? operator for those fields from the related records. This will return undefined if Contact__c isn't populated rather than throwing an error.

This would look something like this:

data.forEach((row) =>{
    let dataline = {};
    dataline.opLink = '/'+row.Id;
    dataline.Name = row.Name;
    dataline.cityPostcode = row.Postcode_City__c;
    dataline.pricePoint = row.Price_Point__c;
    dataline.description = row.Description__c;
    dataline.mobile = row.Contact__r?.MobilePhone;
    dataline.email = row.Contact__r.?Email;
    
    

    opList.push(dataline);
    console.log(opList);
})

Details of that operator can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .