title: Consuming API in JSON via Angular service - how do I filter the data it returns?
body: <p>I have an Angular 6 <code>UsersService</code> which is being injected into the <code>UsersComponent</code>.</p>
  <p>The component was originally displaying mock data - a string array. Now it is consuming an API in JSON format consuming <a href="http://jsonplaceholder.typicode.com/users" rel="nofollow noreferrer">JSONPlaceholder</a> via the <code>UsersService</code>.</p>
  <p>The service stores the JSON object in the <code>filteredUsers</code> array, which is then looped over. Some of the properties in each item of the array are passed into the <code>Member</code>'s constructor, and the instantiated <code>Member</code>s object is pushed into another array, <code>apiNameList</code>.</p>
  <p>The resulting <code>apiNameList</code> array has 10 <code>Member</code> objects of the shape:</p>
  <pre><code>{
    name: string,
    email: string,
    address: string
  }
  </code></pre>
  <p>The method which handles this, <code>serveUsers()</code>, is called inside the <code>ngOnInit</code> lifecycle hook.</p>
  <p>In the <code>UsersComponent</code> template an <code>*ngFor</code> directive is used to present member details for each member object.</p>
  <h3>Question:</h3>
  <p>How do I filter the entries by the name property (<code>{{user.name}}</code> in the template)?  I would like the string passed to the text input to update the list of names, such that when 'c' is entered, only names in which 'c' or 'C' appears somewhere are displayed, and when 'cl' is entered, the list updates yet again to return only the names in which that combination appears.  As you can tell, there is a getUsers() method on the UsersComponent that I was using to filter the mock data, before I was returning data from an API by means of a service.</p>
  <p>At this point, I am unsure of how to proceed, but I think I may need to create a custom pipe.  Still, even with a custom pipe, I am unsure of how to do this; the 'user' object presented inside the *ngFor is an object, not a string.</p>
  <p>Is there a workable solution to this problem?  Apologies for the messy code - I am still very new to Angular 6 and struggling a bit to get the hang of it.  Here are my files:</p>
  <p>users.component.html:</p>
  <pre><code>&lt;div class=&quot;wrapper&quot;&gt;
    &lt;span id = &quot;search-box&quot;&gt;&lt;input  (input)=&quot;getUsers($event.target.value)&quot; class = &quot;col-lg-7&quot; id= &quot;search-input&quot; type=&quot;text&quot;  name=&quot;users&quot; placeholder = &quot;Search by name&quot;&gt;&lt;/span&gt;
    &lt;span id= &quot;people&quot;&gt;{{userLength}} People&lt;/span&gt;
    &lt;div class=&quot;accordion&quot; id=&quot;accordionExample&quot;&gt;
    &lt;div class=&quot;card&quot; *ngFor = &quot;let user of apiNameList&quot;&gt;
      &lt;div class=&quot;card-header&quot; id=&quot;headingOne&quot;&gt;
        &lt;h5 class=&quot;mb-0&quot;&gt;
          &lt;button class=&quot;btn btn-link&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; [attr.data-target]=&quot;'#' + user.name.slice(0, 2) + user.name.length&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot;&gt;
            {{user.name}}
          &lt;/button&gt;&lt;span class= &quot;plus-sign&quot;&gt;+&lt;/span&gt;
        &lt;/h5&gt;
      &lt;/div&gt;
        &lt;div [attr.id]= &quot;user.name.slice(0, 2) + user.name.length&quot; class=&quot;collapse&quot; aria-labelledby=&quot;headingOne&quot; data-parent=&quot;#accordionExample&quot;&gt;
         &lt;div class=&quot;card-body&quot;&gt;
          &lt;img src=&quot;./assets/user.jpg&quot; id= &quot;user-pic&quot;&gt;
          {{user.email}}
          {{user.address}}
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- end  of .card-body--&gt;
    &lt;/div&gt;&lt;!-- end of .card --&gt;
   &lt;/div&gt;&lt;!--end of .accordion--&gt;
  &lt;/div&gt;&lt;!--end of .wrapper --&gt;
  </code></pre>
  <p>users.component.ts:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { USERS } from '../users';
  import { UsersService } from '../users.service';
  import * as $ from 'jquery';
  
  @Component({
    selector: 'app-users',
    templateUrl: './users.component.html',
    styleUrls: ['./users.component.css']
  })
  
  export class UsersComponent implements OnInit { 
  
  
    apiNameList = [];
   
    filteredUsers;
    //number of team mbmbers to display
    
    constructor(private usersService: UsersService) { }
  
    ngOnInit() {
      this.serveUsers();
    }
  
    transformPlus(event){
      console.log(event);
    }
  
    //subscribe to service and push the values of the fields arrays so I can display them in view
    serveUsers(){
       this.usersService.serveUsers().subscribe(data =&gt; {this.filteredUsers = data;
        function Member(name, email, address){
          this.name = name;
          this.email = email;
          this.address = address;
        }
        $.each(this.filteredUsers, (index, value) =&gt; {
          var member = new Member(value.name, value.email, value.address.street);
          this.apiNameList.push(member);
          
        });
        console.log(this.apiNameList)
      });
    }
  
  
  //search filter called when search box receives string input
    getUsers(str){
        if(str == &quot;&quot;){
          this.serveUsers();
        }else{
          this.filteredUsers = this.filteredUsers.filter(user =&gt; user.toLowerCase().includes(str.toLowerCase()))
      }
    };
  
  }
  </code></pre>
  <p>users.service.ts:</p>
  <pre><code> import { Injectable } from '@angular/core';
      import { USERS } from './users';
      import { HttpClient } from '@angular/common/http';
      import { Observable } from 'rxjs';
      
      @Injectable({
        providedIn: 'root'
      })
      export class UsersService {
         
        apiUrl = &quot;http://jsonplaceholder.typicode.com/users&quot;;
      
        constructor(private http: HttpClient) { }
      
        serveUsers(){
          return this.http.get(this.apiUrl);
        }
      }
  </code></pre>
  <p>app.module.ts:</p>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms'
  import { AppComponent } from './app.component';
  import { UsersComponent } from './users/users.component';
  import { HttpClientModule } from '@angular/common/http';
  
  
  @NgModule({
    declarations: [
      AppComponent,
      UsersComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>