Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
@ M Coder@ M Coder 

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;
});
}
}
 
NitishNitish
Hi M Coder,

Please find the below code of your controller JS. 
To find the length use JS length method.
ex:- this.contacts.length 
☑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;
});
}
}

Thanks,
Nitish
@ M Coder@ M Coder
hello 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
NitishNitish
Hi M Coder,

Please find the below code which i have implemented in my System and working fine. 

User-added image

User-added image


HTML file:- 
<template>
    <lightning-card title="ContactListComponent" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <lightning-input type="search" value={searchKey} onchange={searchContact}>
            </lightning-input>
            <lightning-button label="Get Contact List" onclick={handleClick}></lightning-button>
            
            <template if:true={contacts}>
                <template for:each={contacts} for:item="contact">
                    
                        <li key={contact.id}>{contact.Name}</li>
                    
                </template>
                
            </template>
            <template if:true={isNoContact}>
                <p>No contact associated with account</p>
            </template>
        </div>
    </lightning-card>
</template>

JS File:-
  
/* eslint-disable no-console*/ 
/* eslint-disable no-debugger*/ 
import { LightningElement,track } from 'lwc';
import findContacts from '@salesforce/apex/ContactController.findContacts';
//import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ContactList extends LightningElement {
 
   //@wire (getContactList) contacts1;
   @track contacts;
   @track isNoContact;
   @track searchKey;
    
   searchContact(event){
    this.searchKey = event.target.value;
    }
    handleClick(){
        findContacts({searchKey : this.searchKey})
        .then(result=>{
            console.log('result====>'+JSON.stringify(result));
            this.contacts = result;
            console.log('contactsLength====>'+this.contacts.length);
            this.isNoContact = false;
            if(this.contacts.length === 0){
            
                this.isNoContact = true;
            }
            this.error = undefined
        })
        .catch(error => {
            this.error = error;
        });
    }
}
Mark this question solved if given answer is helpful.

Thanks,
Nitish Singh,
nitishsingh.sfdc@gmail.com
@ M Coder@ M Coder
hello Nitish , 

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
NitishNitish
Hi M Coder,

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.

User-added image

User-added image

Please find the sample code as well 
/* eslint-disable @lwc/lwc/no-inner-html */
/* eslint-disable @lwc/lwc/no-document-query */
/* eslint-disable no-console*/ 
/* eslint-disable no-debugger*/ 
import { LightningElement,track, wire } from 'lwc';
import findContacts from '@salesforce/apex/ContactController.findContacts';
//import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ContactList extends LightningElement {

 

   
   @track contacts;
   @track isNoContact;
   @track searchKey;

   searchContact(event){
    this.searchKey = event.target.value;
    }

    @wire (findContacts,{searchKey:'$searchKey'})
    // eslint-disable-next-line no-unused-vars
    conList({error,data}){
        if(data){
            this.contacts = data;
            if(this.contacts.length === 0){
                
            this.isNoContact = true;
            }
        }
        error = undefined;
    }


}
*Mark this question as solved if given answer is helpful.*
Thanks,
Nitish Singh 
sje lseksje lsek
What is the best way to integrate this program script in dynamic hosted website (https://jrstracking.com/) of WordPress?