Lightning component not showing details but the console does

Question

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-

Any suggestions? thanks!

Answer 1

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