title: Angular 4 api call json search functionality
body: <p>I need to make a search functionality in an Angular 4 application, the data is already a json doc in a url external to the project folders.
  I need to be able to access the data searching by title or author, and get results of the search.
  I am not able to get results when I write in the input search box.</p>
  
  <p>My code now:</p>
  
  <p>json data*****</p>
  
  <p><code>[
          {
              "title": "title1",
              "author": "author1",
              "users": [
                  {
                      "id": 1,
                      "name": "Isidro"
                  },
                  {
                      "id": 4,
                      "name": "Jose Miguel"
                  },
                  {
                      "id": 3,
                      "name": "Trinidad"
                  }
              ]
          },
          {
              "title": "title2",
              "author": "author2",
              "users": [
                  {
                      "id": 4,
                      "name": "Jose Miguel"
                  },
                  {
                      "id": 5,
                      "name": "Beatriz"
                  },
                  {
                      "id": 6,
                      "name": "Rosario"
                  }
              ]
          },</code></p>
  
  <p>app.component.html******</p>
  
  <pre><code>&lt;input
      (keyup)="searchTerm$.next($event.target.value)"&gt;
  
  &lt;ul *ngIf="results"&gt;
    &lt;li *ngFor="let result of results"&gt;
      &lt;a href="{{ result.latest }}" target="_blank"&gt;
        {{ result.title }}
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>app.service.ts*********</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/debounceTime';
  import 'rxjs/add/operator/distinctUntilChanged';
  import 'rxjs/add/operator/switchMap';
  
  @Injectable()
  
  export class AppService {
    baseUrl: string = 'https://raw.githubusercontent.com/elena-in-code/books/master/bookcollection.json';
  queryUrl: string = '?search=';
  
  
    constructor(private http:Http){}
  
    search(terms: Observable&lt;string&gt;) {
      return terms.debounceTime(400)
        .distinctUntilChanged()
        .switchMap(term =&gt; this.searchEntries(term));
    }
  
    searchEntries(term) {
      return this.http
          .get(this.baseUrl + this.queryUrl + term)
          .map(res =&gt; res.json());
    }
  }
  </code></pre>
  
  <p>app.component.ts*********</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AppService } from './app.service';
  import {Observable} from 'rxjs/Observable';
  import { Subject } from 'rxjs/Subject';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/debounceTime';
  import 'rxjs/add/operator/distinctUntilChanged';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [AppService]
  })
  export class AppComponent  {
    results: Object;
    searchTerm$ = new Subject&lt;string&gt;();
  
    constructor(private appService: AppService){
      this.appService.search(this.searchTerm$)
        .subscribe(results =&gt; {
          this.results = results.results;
        });
    }
  }
  </code></pre>
  
  <p>app.module.ts*********</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpModule } from '@angular/http';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  import { AppComponent } from './app.component';
  import { AppService } from './app.service';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule, 
      HttpModule, 
      FormsModule
    ],
    providers: [AppService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>