How to display the records based on selected picklist value in LWC



AccountSearchController
=======================
public class AccountSearchController
{
    @AuraEnabled(cacheable=true)
    public static List<Account> displayAccountRecords(String searchKey)
    {
        System.debug('searchKey'+searchKey);
        List<Account> returnlist=new List<Account>();
        for(Account acc:[select Name,Industry from Account where Industry=:searchKey])
        {
            returnlist.add(acc);
        }
        return returnlist;
    }
}


displayAccounts.html
====================
<template>
<template if:true={IndustryPicklistValues.data}>
<lightning-combobox name="progress"
  label="Industry"
  value={value}
  placeholder="-Select-"
  options={IndustryPicklistValues.data.values}
  onchange={handleChange} >
</lightning-combobox>
</template><br/><br/>
<template if:true={records}>
<table>
  <tr>
<th>AccountName</th>
<th>Industry</th>
  </tr>
  <template for:each={records} for:item="acc">
   <tr key={acc.Id}>
  <td>{acc.Name}</td>
  <td>{selectedIndustryVal}</td>
   </tr>
</template>
</table>
</template>
</template>


controller
==========
import { LightningElement, track, wire} from 'lwc';
import { getPicklistValues,getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import displayAccountRecords from '@salesforce/apex/AccountSearchController.displayAccountRecords';
export default class DisplayAccounts extends LightningElement {
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo;
    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: INDUSTRY_FIELD})
    IndustryPicklistValues;
    @track value;
    @track records;
    @track errors;
    @track selectedIndustryVal;
    @wire(displayAccountRecords, {searchKey: '$selectedIndustryVal' })
    wiredAccount({ error, data }) {
        if (data) {
            this.records = data;
            this.errors = undefined;
         
        } else {
            this.errors = error;
            this.records = undefined;
     
        }
    }

    handleChange(event) {
        this.selectedIndustryVal = event.detail.value;
         // eslint-disable-next-line no-console
         console.log(this.selectedIndustryVal);
    }
}














     
   
 
   
   

Comments