please check the code :
HTML:
<!-- sldsValidatorIgnore -->
<template>
<div class="slds-modal__container">
<div style="height: 300px;" if:true={data} >
<lightning-datatable
key-field="id"
data={data}
columns={columns}>
</lightning-datatable>
<div> {data} </div>
</div>
</div>
</template>
Javascript :
import { LightningElement, wire, api, track } from 'lwc';
import AccountBasedOnIndustries from '@salesforce/apex/AccountBasedOnIndustry.accountBasedOnIndustries';
export default class AccountInSameIndustry extends LightningElement {
@api recordId;
@wire(AccountBasedOnIndustries, {recordId : '$recordId'}) recorddetails;
@track columns = [
{ label: 'Label', fieldName: 'Name'},
{ label: 'Industry', fieldName: 'Industry'},
{ label: 'Website', fieldName: 'Website'},
];
connectedCallback(){
setTimeout(() => {
const data = this.recorddetails;
this.data = data;
console.log('get data--->', this.data);
console.log('get recorddetails',this.recorddetails)}, 2000);
}
}
It's retrieving data too from server side as you can see in the attached photo.
but columns are still empty.
Thanks in advance
Please try the below code
<template>
<div class="slds-modal__container">
<div style="height: 300px;" if:true={accounts} >
<lightning-datatable
key-field="id"
data={accounts}
columns={columns}>
</lightning-datatable>
</div>
</div>
</template>
import { LightningElement, wire, api, track } from 'lwc';
import AccountBasedOnIndustries from '@salesforce/apex/AccountBasedOnIndustry.accountBasedOnIndustries';
export default class AccountInSameIndustry extends LightningElement
{
@api recordId;
@track accounts = [] ;
@track columns =
[
{ label: 'Account', fieldName : 'AccountURL', type: 'url' ,typeAttributes: {label: { fieldName: 'AccountName' }, target: '_blank'}, sortable : false},
{ label: 'Industry', fieldName: 'Industry', type: 'text'},
{ label: 'Website', fieldName: 'Website', type: 'url'},
{ label: 'CustomCountry', fieldName: 'CustomCountry__c', type: 'text'},
{ label: 'NoOfEmployees', fieldName: 'NoOfEmployees__c', type: 'text'}
];
connectedCallback()
{
this.loadData();
}
loadData()
{
AccountBasedOnIndustries({recordId : this.recordId})
.then(result =>
{
console.log('UAC: result ' + JSON.stringify(result));
result.forEach(ac => {
ac.AccountURL = '/' + ac.Id ;
ac.AccountName = ac.Name ;
});
console.log('UAC: result after ' + JSON.stringify(result));
this.accounts = result;
})
.catch(error =>
{
console.log('UAC: Exception ' + error);
});
}
}
Cachable removed because we want to change the values after retrieving.
public with sharing class AccountBasedOnIndustry
{
@AuraEnabled
public static List<Account> accountBasedOnIndustries(string recordId)
{
System.debug(recordId);
Account Ac = [select Name, Industry, Website from Account where Id =: recordId limit 1];
String Industry = Ac.Industry;
String noOfEmployees = ac.NoOfEmployees__c ;
return [SELECT Id, Name, Industry, Website, CustomCountry__c, NoOfEmployees__c FROM Account WHERE Industry =: Industry AND NoOfEmployees__c = :noOfEmployees WITH SECURITY_ENFORCED] ;
}
}
