Apex Class
public with sharing class customSearchController {
@AuraEnabled(cacheable=true)
public static list<POSM_Item__c> getContactList(string searchKey) {
string sTempSearchKey = '%' + searchKey + '%';
// create POSM Item list to store search result
list<POSM_Item__c> lstContact = new list<POSM_Item__c>();
// query POSM Item records
for(POSM_Item__c oItem : [SELECT Id, Name, POSM_Image__c, Brand__c, Item_Code__c
FROM POSM_Item__c
WHERE Name LIKE : sTempSearchKey]){
lstContact.add(oItem);
}
//If there are no records found with searchKey then, throw aura exception with a message
if(lstContact.size() == 0){
throw new AuraHandledException('No Record Found..');
}
return lstContact;
}
}
HTML
<template>
<div class="slds-m-around_medium">
<div class="slds-m-bottom_small">
<lightning-input type="text"
value={sVal}
label="Contact Name"
onchange={updateSeachKey}
></lightning-input>
</div>
<lightning-button label="Search"
onclick={handleSearch}
variant="brand"></lightning-button>
<!-- custom data table(with SLDS style) to display contact list -->
<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="Name"> Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Image">Image</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Brand">Brand</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Item Code">Item Code</div>
</th>
</tr>
</thead>
<tbody>
<!--iterate all contact records using for-each iteration -->
<template for:each={POSM_Item__c} for:item="POSM_Item__c">
<tr class="slds-hint-parent" key={POSM_Item__c.Id}>
<td>
<div class="slds-truncate">{POSM_Item__c.Name}</div>
</td>
<td>
<div class="slds-truncate">{POSM_Item__c.POSM_Image__c}</div>
</td>
<td>
<div class="slds-truncate">
<lightning-formatted-phone value={POSM_Item__c.Brand__c} ></lightning-formatted-phone>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-formatted-email value={POSM_Item__c.Item_Code__c} ></lightning-formatted-email>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
Javascript
import { LightningElement,track} from 'lwc';
// import server side apex class method
//import getItemList from '@salesforce/apex/customSearchController.getItemList';
import getContactList from '@salesforce/apex/customSearchController.getContactList';
// import standard toast event
import {ShowToastEvent} from 'lightning/platformShowToastEvent'
export default class customSearch extends LightningElement {
//@track: Marks a property for internal monitoring. A template or function using-
//this property forces a component to rerender when the property’s value changes.
@track POSM_Item__c;
sVal = '';
// update sVal var when input field value change
updateSeachKey(event) {
this.sVal = event.target.value;
}
// call apex method on button click
handleSearch() {
// if search input value is not blank then call apex method, else display error msg
if (this.sVal !== '') {
getContactList({
searchKey: this.sVal
})
.then(result => {
// set @track contacts variable with return contact list from server
this.POSM_Item__c = result;
})
.catch(error => {
// display server exception in toast msg
const event = new ShowToastEvent({
title: 'Error',
variant: 'error',
message: error.body.message,
});
this.dispatchEvent(event);
// reset contacts var with null
this.POSM_Item__c = null;
});
} else {
// fire toast event if input field is blank
const event = new ShowToastEvent({
variant: 'error',
message: 'Search text missing..',
});
this.dispatchEvent(event);
}
}
}
POSM_Item__c
to be an empty array by default?POSM_Item__c = [];
. The error looks like it may be coming from trying to iterate over it when it's undefined by default.