+ Start a Discussion
jishan royjishan roy 

data table records not display.

HTML:
<template>
    <lightning-card title="LWC Related fields">
        <template if:true={contactRecord}>
        <lightning-datatable record-id={recordId}
         data={contactRecord} columns={columns} key-field="Id">
        </lightning-datatable>
    </template>
    </lightning-card>
</template>
/////////////////////////////////////////////////////////////////////////
J.S
import { LightningElement,wire,track,api } from 'lwc';
import getAccountRelatedRecord from '@salesforce/apex/accountController.getAccountRelatedRecord';
export default class DisplayRelatedFieldsOnAccount extends LightningElement {
@api recordId;
@track contactRecord;

@track columns = [
    { label: 'FirstName', fieldName: 'FirstName', type: 'text' },
    { label: 'LastName', fieldName: 'LastName', type: 'text' },
    { label: 'Email', fieldName: 'Email'},
    { label: 'Phone', fieldName: 'Phone', type: 'Phone' }
];
@wire(getAccountRelatedRecord, { recordId: '$recordId'})
wireConRecord({error, data}){
    console.log('recordId',this.recordId);
    if(data){
        this.contactRecord = data;
        this.error = undefined;
        console.log('recordId',this.contactRecord);
    }
    else {
        this.error = error;
        this.contactRecord = undefined;
        console.log(error);
    }
}

}
////////////////////////////////////////////////////////////////////////////////
WRAPPER CLASS:

public class accountController{
@AuraEnabled(cacheable = true)
public static List<accWrapper> getAccountRelatedRecord(Id recordId){
 List<Contact> conlist = new List<Contact>();
List<accWrapper> acclist = new List<accWrapper>();
    try{
            conlist= [SELECT Id , Lastname,FirstName,Email,Phone FROM Contact WHERE AccountId =: recordId];
system.debug('Showlists>>>>>' + conlist);
            List<accWrapper> aclist = new List<accWrapper>();
            for (Contact cons : conlist){
                accWrapper aw = new accWrapper();
                aw.contactRecord = cons;
                aclist.add(aw);
            }
 return aclist;
} catch (Exception e){
        throw new AuraHandledException(e.getMessage());
    }
}
public class accWrapper{
    @AuraEnabled
    public Contact contactRecord{get;set;}
}
////////////////////////////////////////////////////////////////////////////////////////////User-added imagethis is my table please help me out of this.
Best Answer chosen by jishan roy
Maharajan CMaharajan C
HI Roy,

 Please use the below updated JS:
 
import { LightningElement,wire,track,api } from 'lwc';
import getAccountRelatedRecord from '@salesforce/apex/accountControllerDF.getAccountRelatedRecord';
export default class DisplayRelatedFieldsOnAccount extends LightningElement {
@api recordId;
@track contactRecord;

@track columns = [
    { label: 'FirstName', fieldName: 'FirstName', type: 'text' },
    { label: 'LastName', fieldName: 'LastName', type: 'text' },
    { label: 'Email', fieldName: 'Email'},
    { label: 'Phone', fieldName: 'Phone', type: 'Phone' }
];
@wire(getAccountRelatedRecord, { recordId: '$recordId'} )
wireConRecord({error, data}){
    console.log('recordId',this.recordId);
    let contacts=[];
    if(data){
        console.log('data --> ' + JSON.stringify(data));
        data.forEach((element) => {
            console.log(element.contactRecord);
            contacts.push(element.contactRecord);
        });
        this.contactRecord = contacts;
        this.error = undefined;
        console.log('Records --> ',JSON.stringify(this.contactRecord));
    }
    else {
        this.error = error;
        this.contactRecord = undefined;
        console.log(error);
    }
}

}

One more suggestion from my side ... For this table there is no need of wrappers class... Just you can return the list<Contacts> from Apex class then in JS you can assign the apex results directly in contactRecord property...

Thanks,
Maharajan.C

All Answers

Maharajan CMaharajan C
HI Roy,

 Please use the below updated JS:
 
import { LightningElement,wire,track,api } from 'lwc';
import getAccountRelatedRecord from '@salesforce/apex/accountControllerDF.getAccountRelatedRecord';
export default class DisplayRelatedFieldsOnAccount extends LightningElement {
@api recordId;
@track contactRecord;

@track columns = [
    { label: 'FirstName', fieldName: 'FirstName', type: 'text' },
    { label: 'LastName', fieldName: 'LastName', type: 'text' },
    { label: 'Email', fieldName: 'Email'},
    { label: 'Phone', fieldName: 'Phone', type: 'Phone' }
];
@wire(getAccountRelatedRecord, { recordId: '$recordId'} )
wireConRecord({error, data}){
    console.log('recordId',this.recordId);
    let contacts=[];
    if(data){
        console.log('data --> ' + JSON.stringify(data));
        data.forEach((element) => {
            console.log(element.contactRecord);
            contacts.push(element.contactRecord);
        });
        this.contactRecord = contacts;
        this.error = undefined;
        console.log('Records --> ',JSON.stringify(this.contactRecord));
    }
    else {
        this.error = error;
        this.contactRecord = undefined;
        console.log(error);
    }
}

}

One more suggestion from my side ... For this table there is no need of wrappers class... Just you can return the list<Contacts> from Apex class then in JS you can assign the apex results directly in contactRecord property...

Thanks,
Maharajan.C
This was selected as the best answer
jishan royjishan roy
hii Maharajan.C,
This is very helpfull.
 
jishan royjishan roy
Thankyou.
jishan royjishan roy
I want some suggestion.
I want to display opportunity and case record aslo on that then what exactly doing?