Angular 2 Basic http service request

Question

I'm stuck in something that's probably very basic... I just need to call a web server and grab my results. It used to be easy in Angular 1.

This is my component that's call the service:

import {Component, Input, OnChanges} from "angular2/core";
import {SearchService} from "../../../services/search.service";

@Component({
  selector: "typeahead",
  providers: [SearchService],
  template: `
    {{searchSvc | json}}
  `,
})
export class TypeaheadComponent implements OnChanges {
  @Input() txt: string;
  display = false;
  searchSvc;

  ngOnChanges(changes: { [propName: string]: SimpleChange }) {
    var search = changes['txt'].currentValue;
    if (search.length > 2) {
      this.display = true;
      this.searchSvc = this._searchService.DoGeneralSearch();
    }
    else {
      this.display = false;
    }
  }

  constructor(private _searchService: SearchService) {

  }
}

This is the service I'm using:

import {Injectable, OnInit} from 'angular2/core';
import {Http, HTTP_PROVIDERS, Response} from 'angular2/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SearchService implements OnInit {
  generalSearchResults;

  ngOnInit() {
    this.DoGeneralSearch();
  }

  constructor(private _http: Http) {
  }

  DoGeneralSearch() {
    this._http.get('http://localhost:7000/search?q=chem')
      .map((res: Response) => res.json())
      .subscribe(
        data => {
          this.generalSearchResults = data
        },
        err => console.log(err),
        () => console.log(this.generalSearchResults)
      )
  }
}

Basically I just wish to see my results displaying in my template. The results I just can see when () => console.log(this.generalSearchResults) get invoked and I notice this on my console. I see the results and the results are correct, the jSon object are correct.

What could be wrong or missing ?

score 1 · Accepted Answer · edited Nov 04 '17 at 14:05

1

You need to return the observable from your DoGeneralSearch and subscribe in the component instead:

export class SearchService {
  constructor( private _http: Http ) {
  }

  DoGeneralSearch(){   
    return this._http.get('http://localhost:7000/search?q=chem')
     .map((res:Response) => res.json());
  }
}

For this you can leverage the async pipe:

@Component({
  selector: "typeahead",
  providers: [SearchService],
  template : `
    {{searchSvc | async | json}}
  `
})
export class TypeaheadComponent implements OnChanges {
  @Input() txt: string;
  display = false;

  constructor(private _searchService: SearchService) {
  }

  ngOnChanges(changes: {[propName: string]: SimpleChange}) {
    var search = changes['txt'].currentValue;
    if(search.length > 2) {
        this.display = true;
        this.searchSvc = this._searchService.DoGeneralSearch();
    }
    else {
      this.display = false;
    }
  }
}

edited Nov 04 '17 at 14:05

Stefan Falk

23,898
50
191
378

answered Mar 10 '16 at 09:17

Thierry Templier

198,364
44
396
360

Hi, Thierry ! I did the following changes based in your suggestion: return before my this._http and async pipe. The result: Invalid argument '[object Object]' for pipe 'AsyncPipe' in [ res: {{searchSvc | async | json}} in TypeaheadComponent@1:59] . Without the async, I've this error: TypeError: Converting circular structure to JSON in [ res: {{searchSvc | json}} in TypeaheadComponent@1:59] and without json and without async I don't get any error, but [object Object] instead :( – Marco Jr Mar 10 '16 at 09:37
Nevermind..I did't noticed you made changed on my service ! now it's works ! – Marco Jr Mar 10 '16 at 09:43
Great! Yes, you need to return the observable from your service and don't subscribe anymore at this level... – Thierry Templier Mar 10 '16 at 09:44

score 0 · Answer 2 · edited Nov 04 '17 at 14:05

0

export class SearchService {
  constructor( private _http: Http ) {
  }

  DoGeneralSearch(){   
    return this._http.get('http://localhost:7000/search?q=chem')
     .map((res:Response) => res.json());
  }
}



this._searchService.DoGeneralSearch
                   .subscribe(res=>{
                       this.searchSvc =res;  //make sure you get required data here.
                       console.log('bye');
                    },
                    (err)=>console.log(err),
                    ()=>console.log("Done")
                    );

edited Nov 04 '17 at 14:05

Stefan Falk

23,898
50
191
378

answered Mar 10 '16 at 09:41

micronyks

54,797
15
112
146

ty anyway, mycronyks ! – Marco Jr Mar 10 '16 at 09:57
Cheers ! happy coding in angular2. – micronyks Mar 10 '16 at 10:01

Angular 2 Basic http service request

2 Answers2