CODEWITHSUNDEEP
angularrxjs
McflyDroid
McflyDroid

Reputation: 177

Rxjs Angular 2 async pipe working once

I tried to do an async pipe on my project, but this is really working just the first time.

After my http.get returns nothing at all... So I would like to understand what I'm doing wrong, because now I'm completely stuck.

(I do not have a JSONP web service available and I think it's here that I have a pb but normally this would be the same)

My service code : 

getLocation(query: string): Observable<Array<Prediction>> {
    console.log("[call getLocation]")
    let headers = new Headers();
    this.locationUrl = this.locationUrl+"?location="+query;
    headers.append("Accept","application/json");
    return this.http.get(this.locationUrl, {headers: headers})
        .switchMap(this.extractData)
        .catch(this.handleError);
}

My component code :

predictions: Observable<Array<Prediction>>;


constructor(
    private _router: Router,
    private _EventCreationService: EventCreationService,
    private _LocationService: LocationService) {

    console.log("[constrct]")
    predictions = this.term.valueChanges
        .debounceTime(500)
        .distinctUntilChanged()
        .switchMap((term:string): Observable<Array<Prediction>> => {
            console.log("[changed called]"+term)
            return this._LocationService.getLocation(term)
        })
    );
}

and simply have this in my HTML to get the data :

*ngFor="#item of predictions |async"

So i think it's my location service that is not un-subscribing from the first event, but that is why I was using switchmap... but it seems that is not working.

edit : her is the code of extractData and handleError : 

 private extractData(res: Response): Array<Prediction> {
    if (res.status < 200 || res.status >= 300) {
        throw new Error('Bad response status: ' + res.status);
    }
    let body = res.json();
    let result : Array<Prediction> = new Array<Prediction>();
    result.push(body.predictions);
    console.log("-->"+JSON.stringify(body))
    return result;
}

private handleError (error: any) {
   // In a real world app, we might send the error to remote logging infrastructure
   let errMsg = error || 'Server error';
   console.error(JSON.stringify(errMsg)); // log to console instead
   return Observable.throw(errMsg);
}

i'm starting of wondering if it could be a possible error of my angular 2 or rxjs version ....

Upvotes: 0

Views: 444

Answers (2)

musale
musale

Reputation: 584

Instead of switchMap use flatMap which projects each element of an observable sequence to another observable sequence.

Incas you want to cancel previous observables if they are in progress, use flatMapLatest

Upvotes: 0

Thierry Templier
Thierry Templier

Reputation: 202138

I see an error in your getLocation method. It's not the switchMap operator but the map one:

getLocation(query: string): Observable<Array<Prediction>> {
  (...)
  return this.http.get(this.locationUrl, {headers: headers})
    .map(this.extractData) // <-----------
    .catch(this.handleError);
}

Upvotes: 1

Related Questions