Lightning Web Components – Error: Cannot Read Properties of Undefined (Reading ‘Name’)

apexlightning-web-components

When I run my LWC I am receive this error [Cannot read properties of undefined (reading 'Name')] and no data is displaying. Code below:

Apex controller:

public with sharing class conflictListController {

    @AuraEnabled(cacheable=true)
    public static List<Conflict_Item__c> retrieveConflictData(Id recId){       
        List<Conflict_Item__c> conflictList = [Select Id, Name, Deal__c, Deal__r.Name, Prior_Request__c, Prior_Request__r.Name, PriorRequestRole__c, EntityName__c, PriorRequestStatus__c, Individual_Conflict__c, Interested_Party__c, PriorCreatedDate__c, Status__c, Current_Request__c, Current_Request__r.Name From Conflict_Item__c Where Current_Request__c =:recId];
        return conflictList;

    }
}

JS code

    import { LightningElement, track, wire, api } from 'lwc';
import retrieveConflictData from '@salesforce/apex/conflictListController.retrieveConflictData';

const columns = [
    {
        label: 'Conflict Name',
        fieldName: 'conname',
        type: 'url',
        typeAttributes: {label: { fieldName: 'Name' }, target: 'conurl'}
    }, {
        label: 'Deal',
        fieldName: 'dealname',
        type: 'url',
        typeAttributes: {label: { fieldName: 'Name' }, target: 'dealurl'}
    }, {
        label: 'Prior Request',
        fieldName: 'priorreqname',
        type: 'url',
        typeAttributes: {label: { fieldName: 'Name' }, target: 'priorrequrl'}
    }, {
        label: 'Prior Request Role',
        fieldName: 'PriorRequestRole__c',
        type: 'text'
    },
    {
        label: 'Entity Name',
        fieldName: 'EntityName__c',
        type: 'text',
    }, {
        label: 'Prior Request Status',
        fieldName: 'PriorRequestStatus__c',
        type: 'text',
    }, {
        label: 'Individual Conflict',
        fieldName: 'Individual_Conflict__c',
        type: 'text',
    }, {
        label: 'Interested Party',
        fieldName: 'Interested_Party__c',
        type: 'text'
    },
    {
        label: 'Prior Created Date',
        fieldName: 'PriorCreatedDate__c',
        type: 'text'
    },
    {
        label: 'Status',
        fieldName: 'Status__c',
        type: 'text'
    }
];

export default class DisplayContactsOnAccountName extends LightningElement {
    @api recordId;

    consData = [];
    columns = columns;

    

    @wire (retrieveConflictData,{recId: '$recordId'})
    contacts({error, data}){
        if (data) {
            let tempConList = []; 
            
            data.forEach((record) => {
                let tempConRec = Object.assign({}, record);
                tempConRec.conname = tempConRec.Name;
                tempConRec.conurl = '/' + tempConRec.Id;
                tempConRec.dealname = tempConRec.Deal__r.Name;
                tempConRec.dealurl = '/' + tempConRec.Deal__c;
                tempConRec.priorreqname = tempConRec.Prior_Request__r.Name;
                tempConRec.priorrequrl =  tempConRec.Prior_Request__c;

                tempConList.push(tempConRec);
                
            });
            
            this.consData = tempConList;
            this.error = undefined;

            console.table(this.consData);

        } else if (error) {
            this.error = error;
            console.table(this.consData);
        }

               
           /* this.request = data[0].Current_Request__r.Name;  
            this.records = data;
            this.error = undefined;
            this.dataNotFound = '';
            console.log(data);
            if(this.records == ''){
                this.dataNotFound = 'There are no Conflicts returned for this conflict search';
            }

           }else{
               this.error = error;
               this.data=undefined;
           } */
        }
    }

HTML

    <template>
    
    
    <lightning-card title="Conflict Search Results"><br/>
        <div if:true={consData}>
           <lightning-datatable data={consData} 
                                columns={columns} 
                                key-field="Id"
                                hide-checkbox-column="true"></lightning-datatable>
       </div>
   </lightning-card>
</Template>

The only error message i get is as follows:

 Uncaught (in promise) TypeError: LWC component's @wire target property or method threw an error during value provisioning. Original error:
[Cannot read properties of undefined (reading 'Name')]
    at eval (conflictList.js:1:1748)
    at Array.forEach (<anonymous>)
    at p.contacts (conflictList.js:1:1608)
    at aura_prod.js:13:40444
    at Yr (aura_prod.js:13:39820)
    at aura_prod.js:13:40421
    at E.a [as callback] (aura_prod.js:13:40482)
    at E.emit (ldsBindings.js:1:3565)
    at n (ldsBindings.js:1:3444)

I believe its getting the error when I am calling my apex

Best Answer

Mostly you don't have Prior_Request__c or Deal__c on all Conflict_Item__c records. Adding null check in for loop can fix this issue.

update for loop as below for dealname and priorreqname attributes.

 data.forEach((record) => {
                let tempConRec = Object.assign({}, record);
                tempConRec.dealname = tempConRec.Deal__r ? tempConRec.Deal__r.Name : '';
                tempConRec.priorreqname = tempConRec.Prior_Request__r ? tempConRec.Prior_Request__r.Name : '';

                tempConList.push(tempConRec);
                
            });