0

I`ve created a LWC that search for contacts and display details on a table,

The results are showing correctly in the console but at the home page it doesnt not working,

Here is the code - Class-

public with sharing class customSearchSobjectLWC {
@AuraEnabled(cacheable=true)
public static List<Contact> getContactList(string searchKey) {
    string searchKeyword = '%' + searchKey + '%';
    

    List<Contact> contactListRecord = new List<Contact>();
 
    for(Contact conObj : [Select Id,Name,Email,FirstName,LastName,Phone
                        From Contact
                        WHERE name LIKE : searchKeyword]){
       contactListRecord.add(conObj);
    }
    
     if(contactListRecord.size() == 0){
        throw new AuraHandledException('No Record Found..'); 
     }
     
    return contactListRecord;
}

}

JS- import { LightningElement, track } from 'lwc'; import getContactList from '@salesforce/apex/customSearchSobjectLWC.getContactList'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'

export default class customSearch extends LightningElement {

@track contactsRecord;
searchValue = '';

searchKeyword(event) {
    this.searchValue = event.target.value;
}

handleSearchKeyword() {

    if (this.searchValue !== '') {
        getContactList({
                searchKey: this.searchValue
            })
            .then(result => {
                this.contactsRecord = result;
                console.log("this", result)
            })
            .catch(error => {

                const event = new ShowToastEvent({
                    title: 'Error',
                    variant: 'error',
                    message: error.body.message,
                });
                this.dispatchEvent(event);  
                this.contactsRecord = null;
            });
    } else {
        const event = new ShowToastEvent({
            variant: 'error',
            message: 'Search text missing..',
        });
        this.dispatchEvent(event);
    }
}

}

HTML-

<template>
<div class="slds-m-around_medium">
  
  <div class="slds-m-bottom_small">
      <lightning-input type="text"
         value={searchValue}
         label="Contact Name"
         onchange={searchKeyword}
         ></lightning-input>
   </div>
   
   <lightning-button label="Search"
      onclick={handleSearchKeyword}
      variant="brand"></lightning-button>
      
  
   <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small">
      <thead>
         <tr class="slds-line-height_reset">
            <th class="" scope="col">
               <div class="slds-truncate" title="First Name">First Name</div>
            </th>
            <th class="" scope="col">
               <div class="slds-truncate" title="Last Name">Last Name</div>
            </th>
            <th class="" scope="col">
               <div class="slds-truncate" title="Phone">Phone</div>
            </th>
            <th class="" scope="col">
               <div class="slds-truncate" title="Email">Email</div>
            </th>
         </tr>
      </thead>
      
      <tbody>   
         <template for:each={contacts} for:item="con">
            <tr class="slds-hint-parent" key={contact.Id}>
               <td>
                  <div class="slds-truncate">{con.FirstName}</div>
               </td>
               <td>
                  <p class="slds-truncate">{con.LastName}</p>
               </td>
               <td>
                  <div class="slds-truncate">
                     <lightning-formatted-phone value={con.Phone} ></lightning-formatted-phone>
                  </div>
               </td>
               <td>
                  <div class="slds-truncate">
                     <lightning-formatted-email value={con.Email} ></lightning-formatted-email>
                  </div>
               </td>
            </tr>
         </template>

As you can see in the JS file the console log for results works perfectly and displays the list of the results- Results from console log

Any suggestions? thanks!

1 Answer 1

0

Change for:each={contacts} to for:each={contactsRecord}

1
  • Hi, Thanks it worked, I got an error after changing it (TypeError: Cannot read properties of undefined (reading 'Id')) and I managed to fix it by changing <tr class="slds-hint-parent" key={contacts.Id}> to - <tr class="slds-hint-parent" key={con.Id}> Apr 26 at 11:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.