We can not straight forward map relationship filed from apex to LWC data table. When we get query results related object information comes as different object itself. So we need to traverse the query results and map the way we want to.
Hers is your controller method
@AuraEnabled(cacheable=true)
public static List<Associated_Healthcare_Center__c> getAssociatedFacility(Id sLeadId,Id sAccountId){
return [SELECT id,Signature_Healthcare_Center__c,Signature_Healthcare_Center__r.phone__c,
Signature_Healthcare_Center__r.Facility_Short_Name__c,
Signature_Healthcare_Center__r.Admission_Director__r.Name
FROM Associated_Healthcare_Center__c WHERE Account__c =:sAccountId
Order By Signature_Healthcare_Center__r.Facility_Short_Name__c];
}
Template Data table code
<div style="height: 300px;">
<lightning-datatable
key-field="Signature_Healthcare_Center__c"
data={data}
columns={columns}>
</lightning-datatable>
</div>
Template Java script code.
import { LightningElement,api,wire,track} from 'lwc';
import getAssociatedFacility from '@salesforce/apex/AssignFacilityLWCController.getAssociatedFacility';
const columns = [
{ label: 'Facility', fieldName: 'Facility' },
{ label: 'Admission Director', fieldName: 'AdmissionDirector', type: 'text' },
{ label: 'Phone', fieldName: 'Phone', type: 'phone' },
];
export default class AssignFacilityLWCModal extends LightningElement {
@api recordId;
@api accountId;
@track data;
@track columns = columns;
@track error;
/*connectedCallback() {
console.log('Inside chield component record Id -->',this.recordId);
if(this.recordId){
getAssociatedFacility({sLeadId:this.recordId,sAccountId:this.accountId})
.then(result=>{
console.log('result-->',result);
}).catch(err => {
console.log('err',err)
this.showError(err.message);
});
}
}*/
@wire(getAssociatedFacility,{sLeadId:'$recordId',sAccountId:'$accountId'})
getAssociatedFacilityWired({ error, data }) {
if (data) {
let tempRecords = JSON.parse( JSON.stringify( data ) );
tempRecords = tempRecords.map( row => {
return { ...row, Facility: row.Signature_Healthcare_Center__r.Facility_Short_Name__c,
AdmissionDirector: row.Signature_Healthcare_Center__r.Admission_Director__r.Name,
Phone: row.Signature_Healthcare_Center__r.Phone__c };
});
console.log(' this.datempRecordta-->', this.tempRecords);
this.data = tempRecords;
this.error = undefined;
} else if (error) {
this.error = error;
this.data = undefined;
}
}
In Console this is how query results will be shown before mapping
Here is actual Output
