Unable to apply search filter for data present in json file

Question

This is my (custom.component.html) file

    <input ng-model="searchText" placeholder="&nbsp;&nbsp;Enter the name" 
            class="seacrh-field"><br><br>

     <mat-card class="example-card" *ngFor="let spaceScreen of 
               spaceScreens; 
                   let i = index">

        <mat-card-header>
           <div mat-card-avatar class="example-header-image" >
                <img mat-card-image class="list-img" src=" 
              {{spaceScreen?.img}}" >
          </div>

          <mat-card-content class="names">{{ spaceScreen?.name }} 
          </mat-card-content>
       </mat-card-header>

    </mat-card>

This is (custom.component.ts) file

            import { Component, OnInit } from '@angular/core';
            import { Http } from '@angular/http'; 
            import { map } from 'rxjs/operators'

            @Component({
              selector: 'ylb-customer',
              templateUrl: './customer.component.html',
              styleUrls: ['./customer.component.css']
            })
            export class CustomerComponent  {

              spaceScreens: Array<any>;

              constructor(private http:Http){
                this.http.get('assets/app.json').pipe(
                  map(response => response.json().screenshots)
              ).subscribe(res => this.spaceScreens = res);
                }


            }

This is(app.json) file present in assets folder

            {   
        "screenshots":[ 

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Virat Kohli"
                    },

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Joe Root"
                    },

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Adam Gilchrist"
                    },
                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Kevin Peterson"
                    },

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Misbhah-Ul-Hak"
                    },

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"ABD Develliers"
                    },
                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Ben stokes"
                    },

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Chris Gayle"
                    }

            ]        
        }

Everything is working fine,how can i apply search filter(like contact list in mobile)to data present in app.json file.Tried many method,still no result.How can i achieve easily using custom pipes

Answer 1

In Angular 1 most people did filtering with pipes. This was pointed out by trichetriche in the comments of the other answer and is correct. Problem is allowing this behavior leads to poor performance because every digest cycle would trigger the filtering (and this happens a lot). So in Angular 2+ they want you to filter the results in the components and store the results in an array, then just use *ngFor="myFilteredArray".

First setup binding on your input so we can get what the user wants to search for.

//Use this method if you want to track name for more than a filter.  
//Result will be stored in name var
<input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()">
//Use this if you don't need to track the name text for anything else.
<input type="text" (input)="onNameChangeInput($event.target.value)">

<div *ngFor="let s of filteredScreenshots">
  {{s | json}}
</div>

Second add change functions to your component.ts

You are going to want a library like lodash or underscore. If you don't have lodash install with - https://lodash.com/docs

npm install lodash

component.ts

import * as _ from 'lodash';

export class CustomerComponent  {

    spaceScreens: Array<any>;
    filteredScreens = [];
    name: string;

    constructor(private http:Http){
        this.http.get('assets/app.json').pipe(
              map(response => response.json().screenshots)
          )
          .subscribe(res => {
              this.spaceScreens = res; //this is what we filter against
              this.filteredScreens = res; //init with full list
         });
    }

    onNameChange() {
        this.filteredScreens = _.filter(this.spaceScreens, (screenshot) => {
             const name = screenshot['name'];
             const filteredName = this.name.toUpperCase();
             return name === undefined ? false : name.toUpperCase().startsWith(filteredName);
        });
    }

    onNameChangeInput(filteredName: string) {
        this.filteredScreens = _.filter(this.spaceScreens, (screenshot) => {
            const name = screenshot['name'];
            filteredName = filteredName.toUpperCase();
            return name === undefined ? false : name.toUpperCase().startsWith(filteredName);
       });
    }
}

You only need to go with one input and one change function, they are named appropriately so it's obvious which method goes with each input.

Edit: I forgot to mention this solution is case insensitive, since generally on a search like this you don’t care about case. If you want it to be case sensitive then remove the .toUpperCase().