title: To display json data in alphabetical order
body: <p>This is my(customer.component.html)file</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()"&gt;
  
  &lt;div *ngFor="let s of filteredScreenshots"&gt;
    {{s | json}}
  &lt;/div&gt;
  
  &lt;mat-card class="example-card" *ngFor="let filteredScreen of 
   filteredScreens | filter : filteredScreen;"  let i = index&gt;
  
    &lt;mat-card-header&gt;
      &lt;div mat-card-avatar class="example-header-image" &gt;
         &lt;img mat-card-image class="list-img" src=" 
            {{filteredScreen?.img}}"&gt;
      &lt;/div&gt;
      &lt;mat-card-content class="names"&gt;
        {{ filteredScreen?.name }} 
      &lt;/mat-card-content&gt;
    &lt;/mat-card-header&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  
  
  <p>This (customer.component.ts)file</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { Http } from '@angular/http'; 
  import { map } from 'rxjs/operators'
  import * as _ from 'lodash';
  
  
  @Component({
    selector: 'ylb-customer',
    templateUrl: './customer.component.html',
    styleUrls: ['./customer.component.css']
  })
  
  export class CustomerComponent  {
  
    spaceScreens: Array&lt;any&gt;;
    filteredScreens = [];
    name: string;
  
  
    constructor(private http:Http){
      this.http.get('assets/app.json').pipe(
              map(response =&gt; response.json().screenshots)
          )
          .subscribe(res =&gt; {
              this.spaceScreens = res; 
              this.filteredScreens = res;
      });
    }
  
    onNameChange() {
      this.filteredScreens = _.filter(this.spaceScreens, (screenshot) =&gt; {
      const name = screenshot['name'];
      const filteredName = this.name.toUpperCase();
      return name === undefined ? false : name.toUpperCase().startsWith(filteredName);
      });
    }
  
  
  }
  </code></pre>
  
  
  
  <p>I have created json file called app.json inside(assets)folder,The app.json file code as follows</p>
  
  <pre class="lang-js prettyprint-override"><code>{   
    "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"
      }
  
    ]        
  }
  </code></pre>
  
  
  
  <p>Created 2 pipe file(sort.pipe.ts and filter.pipe.ts)inside folder called shared</p>
  
  <p>(sort.pipe.ts)is as follows</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Pipe, PipeTransform } from "@angular/core";
  
  @Pipe({
    name: "sort"
  })
  export class ArraySortPipe  implements PipeTransform {
    transform(array: any[], field: string): any[] {
      array.sort((a: any, b: any) =&gt; {
      if (a[field] &lt; b[field]) {
          return -1;
      } else if (a[field] &gt; b[field]) {
          return 1;
      } else {
          return 0;
      }
      });
      return array;
    }
  }
  </code></pre>
  
  
  
  <p>(filter.pipe.ts)is as follows</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Pipe, PipeTransform } from '@angular/core';
  @Pipe({
    name: 'filter'
  })
  export class FilterPipe implements PipeTransform {
    transform(items: any[], searchText: string): any[] {
      if(!items) return [];
      if(!searchText) return items;
      searchText = searchText.toLowerCase();
      return items.filter( it =&gt; {
        return it.toLowerCase().includes(searchText);
      });
    }
  }
  </code></pre>
  
  
  
  <p>and imported these pipe files in(app.modules.ts) like this</p>
  
  <pre class="lang-js prettyprint-override"><code>import { FilterPipe} from './shared/filter.pipe';
  import { ArraySortPipe} from './shared/sort.pipe';
  
  @NgModule({
    declarations: [
    FilterPipe,
    ArraySortPipe
  ],  
  </code></pre>
  
  
  
  <p>I have to achieve this following 2 conditions
  1)I want to display the data present in app.json file in alphabetical order 
  2)How can i apply search for last name of the name string,i mean suppose i want to search virat kohli,how can i search it by typing only kohli</p>
  
  <p>I tried the above code for this 2 condition but nothing goes right,Please figure out is any mistake in this code.But searching is happening is fine.</p>