CODEWITHSUNDEEP
angularangular5angular7angular8angular9
Souvik Pal
Souvik Pal

Reputation: 63

Filtering of Array using filter() works fine, but doesn't change in frontend

component.ts

searchVideo = (search: string) => {
        this.query = search;
        if(this.videos.length == 0){
          this.filteredData = [];
        }
        if(!this.query){
          this.filteredData = this.videos;
        }
        const args = this.query.toLowerCase();
        this.filteredData = this.videos.filter((data: any) => {
          return JSON.stringify(data).toLowerCase().includes(args);
        });
        console.log(this.filteredData);
      }

component.html

<app-search-bar (sender)="searchVideo($event)"></app-search-bar>
...
<p>{{filteredData}}</p>

Frontend Output: enter image description here

Console Output:

enter image description here

After filtering, data shown in console is absolutely correct which I want but while printed in frontend data remain same.

As you can see in console initially array size is 12, on input in input field, array filter itself to size 7 which is correct but on frontend array remain as it is which is 12

Upvotes: 1

Views: 962

Answers (1)

ebarooni
ebarooni

Reputation: 1968

I have prepared a code sample that shows the usage of filter and it behaves as expected (similar to how you have used it).

But i think your issue is that you are trying to show an array of objects in your template which is behaving as expected. You should instead show the properties of your objects (or in general change the way you visualize your objects).

Here is the code sample that shows the usage of filter and your issue and a possible solution: Code demo

Upvotes: 1

Related Questions