Unable to search object array value via a Angular pipe

Issue

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVZ0UIAlhdi6w5sN7hLi1DpkYydBGcL8rlZP89mJu1SoXE24nLRUdcs-uALTOqpfV-bfLrd_84aLL-mLD5ojF6YE9TgGAcj5awmcl1Ao2JFmCRC-xqX2KOmHu4qKmOLNsHDB9pM-c7cr9r/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVZ0UIAlhdi6w5sN7hLi1DpkYydBGcL8rlZP89mJu1SoXE24nLRUdcs-uALTOqpfV-bfLrd_84aLL-mLD5ojF6YE9TgGAcj5awmcl1Ao2JFmCRC-xqX2KOmHu4qKmOLNsHDB9pM-c7cr9r/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.

Solution

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

Answered By - Surjeet Bhadauriya