You need to sign in to do that
Don't have an account?
how to check length or size of data --- LWC
Hello folks ,
I want to show a custom message or toast message if no contacts are found for an account . could you please correct my code .
please tell how to check the size or length of the returned contacts .
below code displays Contacts if present under an account .
html code:
<template>
<lightning-card title="Apex Method With Parameters">
<lightning-layout>
<lightning-layout-item flexibility="auto" padding="around-small">
<lightning-layout-item flexibility="grow">
<lightning-input label="Enter Account Name" type="search" onchange={searchContact} value={searchKey}> </lightning-input>
</lightning-layout-item>
<lightning-layout-item class="slds-p-left_xx-small">
<lightning-button label="Search" onclick={doSearch} ></lightning-button> </lightning-layout-item>
<lightning-layout-item class="slds-m-bottom_small">
<template if:true={contacts}>
<template for:each={contacts} for:item="contact">
<p key={contact.Id}> {contact.Name} </p>
</template>
</template>
<template if:false={contacts}>
<p> No Contacts found for this Account </p>
</template>
<template if:true={error}>
{error}>
</template>
</lightning-layout-item>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
js code:
import { LightningElement, track } from 'lwc';
import SearchContactList from '@salesforce/apex/ApexMethodWithParameters.SearchContactList';
export default class ShowContactsIMP extends LightningElement {
/* eslint-disable no-console */
/* eslint-disable no-alert */
@track contacts;
@track error;
searchContact(event){
this.searchKey = event.target.value;
}
doSearch() {
SearchContactList({ accountName: this.searchKey })
.then(
result => {
this.contacts = result;
console.log('contacts => ', JSON.stringify(this.contacts));
alert('contacts => ', JSON.stringify(this.contacts));
this.error = undefined;
}
)
.catch(error => {
this.error = error;
this.contacts = undefined;
});
}
}
I want to show a custom message or toast message if no contacts are found for an account . could you please correct my code .
please tell how to check the size or length of the returned contacts .
below code displays Contacts if present under an account .
html code:
<template>
<lightning-card title="Apex Method With Parameters">
<lightning-layout>
<lightning-layout-item flexibility="auto" padding="around-small">
<lightning-layout-item flexibility="grow">
<lightning-input label="Enter Account Name" type="search" onchange={searchContact} value={searchKey}> </lightning-input>
</lightning-layout-item>
<lightning-layout-item class="slds-p-left_xx-small">
<lightning-button label="Search" onclick={doSearch} ></lightning-button> </lightning-layout-item>
<lightning-layout-item class="slds-m-bottom_small">
<template if:true={contacts}>
<template for:each={contacts} for:item="contact">
<p key={contact.Id}> {contact.Name} </p>
</template>
</template>
<template if:false={contacts}>
<p> No Contacts found for this Account </p>
</template>
<template if:true={error}>
{error}>
</template>
</lightning-layout-item>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
js code:
import { LightningElement, track } from 'lwc';
import SearchContactList from '@salesforce/apex/ApexMethodWithParameters.SearchContactList';
export default class ShowContactsIMP extends LightningElement {
/* eslint-disable no-console */
/* eslint-disable no-alert */
@track contacts;
@track error;
searchContact(event){
this.searchKey = event.target.value;
}
doSearch() {
SearchContactList({ accountName: this.searchKey })
.then(
result => {
this.contacts = result;
console.log('contacts => ', JSON.stringify(this.contacts));
alert('contacts => ', JSON.stringify(this.contacts));
this.error = undefined;
}
)
.catch(error => {
this.error = error;
this.contacts = undefined;
});
}
}
Please find the below code of your controller JS.
To find the length use JS length method.
ex:- this.contacts.length
Thanks,
Nitish
i am using this lwc component in lightning__RecordPage . i fixed the parsing errors of your js files taken from above , but it is not working, can you please check . can you please modify the code how to write using template if else condition insted of toast messages .
modified code below :
import { LightningElement, track } from 'lwc';
import SearchContactList from '@salesforce/apex/ApexMethodWithParameters.SearchContactList';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ShowContactsIMP extends LightningElement {
/* eslint-disable no-console */
/* eslint-disable no-alert */
@track contacts;
@track error;
searchContact(event){
this.searchKey = event.target.value;
}
doSearch() {
SearchContactList({ accountName: this.searchKey })
.then(
result => {
this.contacts = result;
console.log('contacts => ', JSON.stringify(this.contacts));
alert('contacts => ', JSON.stringify(this.contacts));
this.error = undefined;
if(this.contacts.length === 0){
const evt = new ShowToastEvent({
title: 'No Records Found',
message: 'No contact record is associated with this account',
variant: 'Error',
});
this.dispatchEvent(evt);
}
}
)
.catch(error => {
this.error = error;
this.contacts = undefined;
});
}
}
Thq in Adv
Please find the below code which i have implemented in my System and working fine.
HTML file:-
JS File:-
Mark this question solved if given answer is helpful.
Thanks,
Nitish Singh,
nitishsingh.sfdc@gmail.com
Can you please rewrite the same code using Wire functionality , i want to see how can we write it . i tried but failed , can you please re write the same using wire concept.
Thanks in adv
Please find the below codes for the same funtionality using @wire services. To Use the wire service make sure your apex class method is having @AuraEnabled (cacheable= true) defined.
Please find the sample code as well *Mark this question as solved if given answer is helpful.*
Thanks,
Nitish Singh