Searching is not working properly in array of objects, all the code is written in stackblitz link

Question

If i search TC_E_09_CSMS it gives all the records of this object.

Below is the stackblitz link

https://stackblitz.com/edit/angular-ivy-hso2p9?file=src%2Fapp%2Fapp.component.ts

I have updated the link. In console you can see the array contains info related to TC_E_09_CSMS . Since you didn't provide the expected output, you will see an array of empty objects as well. — Mir entafaz Ali
i need to show only the TC_E_09_CSMS on screen after searching. your provided link is not working as expected — surendra kumar

Eliseo Eliseo · Accepted Answer · 2021-05-12T08:37:34

There're some problem in your code

The first is how you use keyup, (keyup)="applyFilter($event);" event is the event of keyup, $event is not the value of the input, so you should write some like

<input #inputID (keyup)="applyFilter(inputID.value);"..>

See that use a template reference variable "inputID" to pass the value

The second is that you always iterate over filteredArray and filteredArray not change

Well, You can use an auxiliar variable finalArray and iterate over this

Your applyFilter function can be more compact. Some like

  //declare a new variable:
  finalArray=this.filteredArray;

  //your function applyFilter more "compact"
  applyFilter(word) {
    if (!word)
      this.finalArray=this.filteredArray;
    else
    {
    word=word.toLowerCase();
    this.finalArray=this.filteredArray.map((x:any)=>{
         const data=x.header.toLowerCase().indexOf(word)>=0?x.data:
                    x.data.filter((d:any)=>d.testcaseId.toLowerCase()==word)

         return {...x,data:data}
    }).filter(x=>x.data.length>0)
    }

BTW, using keyup is one way to filter, but I would prefer use a FormControl(*) and subscribe to valueChange. This allow us use a debounceTime in the way if you change the input quickly don't make severals calls to the input. So

//in .html
<input [formControl]="search"...>

//your code
search:FormControl=new FormControl()
ngOnInit(){
   this.search.valueChanges.pipe(
      debounceTime(200)
   )
   .subscribe(res=>{
       this.applyFilter(res)
   })
}

Your forked stackblitz with all the changes

(*)don't forget import ReactiveFormsModule in your app.module

Searching is not working properly in array of objects, all the code is written in stackblitz link

1 Answers