1

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.

My code now:

json data*****

[ { "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" } ] },

app.component.html******

<input
    (keyup)="searchTerm$.next($event.target.value)">

<ul *ngIf="results">
  <li *ngFor="let result of results">
    <a href="{{ result.latest }}" target="_blank">
      {{ result.title }}
    </a>
  </li>
</ul>

app.service.ts*********

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<string>) {
    return terms.debounceTime(400)
      .distinctUntilChanged()
      .switchMap(term => this.searchEntries(term));
  }

  searchEntries(term) {
    return this.http
        .get(this.baseUrl + this.queryUrl + term)
        .map(res => res.json());
  }
}

app.component.ts*********

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<string>();

  constructor(private appService: AppService){
    this.appService.search(this.searchTerm$)
      .subscribe(results => {
        this.results = results.results;
      });
  }
}

app.module.ts*********

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 { }
3
  • 1
    why your baseUrl has .jsons in error image but .json in above code?? Commented Oct 12, 2017 at 19:48
  • I fixed that bug in the service but still didn´t manage to get search results. so no error anymore, edited the code here. but not functionality. good eye! thx. Commented Oct 12, 2017 at 21:59
  • if its a real service that will filter the data as per search in the backend and give you. Since it is a json file you need to get the entire data and filter them in UI Commented Oct 13, 2017 at 7:42

1 Answer 1

1

'?search='; there is no search parameter in your api thats why your code does not search .

https://api.cdnjs.com/libraries try to replace your api with this api for test it will work .

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.