0

I have implemented client side search as follows in LWC --

const searchKey = event.target.value.toLowerCase()
this.records = this.initialRecords;
 
             if ( this.records ) {

                let recs = [];
                for ( let rec of this.records ) {
                    let valuesArray = Object.values( rec );     
                    for ( let val of valuesArray ) {
                        if( val == '[object Object]' ){
                            val = JSON.stringify(val);
                        }
                        if ( val ) {
                            if ( val.toLowerCase().includes( searchKey ) ) {

                                recs.push( rec );
                                break;
                        
                            }

                        }

                    }
                    
                }

                this.records = recs;

             }
 
        

Is there a better way to search? I am open to suggestions.

Thanks

1 Answer 1

0

View State is a Visualforce concept, and does not apply to LWC/Aura. That said, you should avoid creating more than about 10k elements at once. Use pagination to keep things "snappy". And, yes, you can optimize this heavily by not serializing the data just to search it. It's far more efficient to check each field individually and using Array.prototype.filter:

const searchKey = event.target.value;
// i ignores case
const match = new RegExp(searchKey, "ig");
this.records &&
  (this.records = this.records.filter((record) =>
    Object.entries(record).some(
      ([key, value]) => (value && (value+'').test(match))
  )));
6
  • Thanks for confirming that about the view state.I am not sure what you mean by creating more than 10K records. Do you mean to say I should not fetch more than 10K records from apex controller. and yes I am going to use pagination.
    – sfdx_
    Oct 1, 2021 at 16:24
  • @sfdx_ I'm talking about rendering DOM elements, basically rows times cells DOM elements (minimum) will be rendered from the data, so you should keep the row count down to a sane amount using pagination. Aside from that, you can load 50k records and have it be responsive, just avoid rendering too many items at once.
    – sfdcfox
    Oct 1, 2021 at 16:26
  • Yes I was going to keep a small row count and just add the end result of search to data attribute of datatable. I wanted to make sure on the Js part having a large pool of data to filter and then assigning it to datatable wont be a issue since my sandbox didn't have so much data to actually check it. Thank you So much for your help
    – sfdx_
    Oct 1, 2021 at 16:30
  • @sfdx_ You need to be aware of sluggish performance with individual array accesses, as I address in this answer. The example I show avoids paying the Locker Service penalty by minimizing the number of Locker Service filter calls. You do this by using built-in Array.prototype methods, as shown in this answer.
    – sfdcfox
    Oct 1, 2021 at 16:34
  • Thank you for all the help
    – sfdx_
    Oct 1, 2021 at 16:37

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.