Unable to search object array value via a Angular pipe

Question

I'm trying search an object array with the user typed value in a textbox in Angular 4. I'm using pipe for this. I want return the values in object array by the name while passing search text.

For example :

arrayItems = [{
        name: 'Cam1',
        image: 'https://4.bp.blogspot.com/-OuIrYzKE1lM/WJ1nqskJ5pI/AAAAAAAAOww/v9JfD7Hb_Fwe_K1svBN7gz2A_BUKxbqGwCLcB/s400/mindblowing-awasome-wallpapers-imgs.jpg',
        lastCapturedDate: '11/20/2019 6.20PM'
    },
    {
        name: 'Cam2',
        image: 'https://akm-img-a-in.tosshub.com/indiatoday/559_102017023826.jpg?TZlWXro5W8Rj4VbO.MpENgo1F2MX93j',
        lastCapturedDate: '11/20/2019 6.20PM'
    }
];

In the above array if I entered the value Ca in the text field it should return the both the objects. If I write Cam1 then it should return specific object cam1 only.

Here is my code :

app.component.html :

<div class="col col-md-4 filter-by-cam">
    <input type="text" name="search" value="search" [(ngModel)]="search" #searchSnaps="ngModel" (keyup)="searchSnapshot(searchSnaps.value)" />
</div>

<div *ngFor="let item of snapShotArray | snapShotFilter: search; let i = index; ">
    <img id="img{{i}}" src="{{item.image}}" crossOrigin="Anonymous">
    <div>
        <span> {{item.name}}</span>
        <p>Last captured: {{item.lastCapturedDate}}</p>
    </div>
</div>

app.component.ts :

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  public search: string;
  snapShotArray = [
    {
      name: "Cam1",
      image:
        "https://4.bp.blogspot.com/-OuIrYzKE1lM/WJ1nqskJ5pI/AAAAAAAAOww/v9JfD7Hb_Fwe_K1svBN7gz2A_BUKxbqGwCLcB/s400/mindblowing-awasome-wallpapers-imgs.jpg",
      lastCapturedDate: "11/20/2019 6.20PM"
    },
    {
      name: "Cam2",
      image:
        "https://akm-img-a-in.tosshub.com/indiatoday/559_102017023826.jpg?TZlWXro5W8Rj4VbO.MpENgo1F2MX93j",
      lastCapturedDate: "11/20/2019 6.20PM"
    }
  ];

  public searchSnapshot(name: string) {
    console.log(name);
    this.search = name;
  }

  OnInit() {}
}

pipe.ts :

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "snapShotFilter" })
export class SnapshotFilterPipe implements PipeTransform {
  transform(snapshotArr: any, searchValue: string) {
    if (!snapshotArr) {
      return [];
    }
    if (!searchValue) {
      return snapshotArr;
    }
    if (snapshotArr && searchValue) {
      return snapshotArr.filter(snapshot => {
        snapshot.name.toLowerCase().includes(searchValue.toLowerCase());
      });
    }
  }
}

For now when I try entering a value like C entire displayed array vanishes from the template. But when I remove it. Entire array returns to view. I dont get what is going on here. Any help would be appreciated.

Please find the StackBlitz here.

Answer 1

The issue is you have not returned the object inside the filter if the condition is match. Other things are fine.

if (snapshotArr && searchValue) {
      return snapshotArr.filter(snapshot => {
        return snapshot.name.toLowerCase().includes(searchValue.toLowerCase());
    });
 }

Demo Here