1

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);
       }
   }
}

enter image description here

8
  • 1
    Try settingPOSM_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. – nbrown Jul 8 '20 at 18:46
  • @nbrown should i declare it in the JS file or on the Apex side? – clint carvalho Jul 8 '20 at 21:47
  • Inside the JS file – nbrown Jul 9 '20 at 13:06
  • @nbrown i added it after "import {LightningElement, track} from 'lwc' ;" but it gives this error in the image added above – clint carvalho Jul 9 '20 at 17:20
  • 1
    @Arthlete you were right that was the issue thanks! – clint carvalho Jul 9 '20 at 18:00
0

The problem comes from this line of code:

<template for:each={POSM_Item__c} for:item="POSM_Item__c">.

As the documentation states:

When using the for:each directive, use for:item="currentItem" to access the current item.

You are clearly creating a conflict by attempting to assign the same variable name for the current item which you've already assigned for the @track POSM_Item__c JS array.

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.