0

I want to show contacts of an account, for that I have created LWC, I am calling Apex method here and I want to show all contacts of an account using data table, but data is not showing in the UI. I am using custom label to pass account to Apex class. please help me to achieve this below is my code

JS Code:

const columns = [    
    { label: "Name", fieldName: "Name" },   
    { label: "Phone", fieldName: "Phone"},
    { label: "Email", fieldName: "Email"}
];
@track contactsList =[];

@wire(GetContacts,{AccountId:this.AccountId}) 
WireContactRecords({error, data}){
    console.log('Entering WireContactRecords');
    console.log('Entering WireContactRecords===='+this.AccountId);
    if(data){
        console.log('data*********+'+JSON.stringify(data))
        this.contactsList = data;
        this.error = undefined;
    }else{
        this.error = error;
        this.contactsList = undefined;
    }
}

Apex class

@AuraEnabled(cacheable = true)
public static Contact GetContacts(String AccountId){
        String query = 'SELECT Name,Phone,Email FROM Contact WHERE AccountId =: AccountId';
        return Database.query( query );
}

HTML CODE

 <lightning-datatable
                                    
     data={contactsList}
      columns={columns}
      key-field="id"
      hide-checkbox-column>
 </lightning-datatable>
RubenDG
  • 1,365
  • 1
  • 13
  • 18
user97539
  • 1
  • 1

1 Answers1

1

The syntax to pass the value of a property defined in the JS class to a wired function is: @wire(functionName, { param: '$propertyName' })

Therefore, assuming that your class has an AccountId property, you have to change

@wire(GetContacts,{AccountId:this.AccountId})

to

@wire(GetContacts,{AccountId: '$AccountId'})

Moreover in the HTML you can use only property defined in your JS class, so if columns is defined only outside it, you should provide a getter:

get columns() {
    return columns;
}
RubenDG
  • 1,365
  • 1
  • 13
  • 18