Rxjs Angular 2 async pipe working once

Question

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 ....

Thierry Templier · Accepted Answer · 2016-05-23 10:03:37Z

1

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);
}

answered May 23, 2016 at 10:03

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

9 Comments

McflyDroid Over a year ago

why use map ? i've used switchmap to automatically unsubscribe to last event.

Thierry Templier Over a year ago

Yes agreed but in this particular case, it seems that you want to extract data not unsubscribe the last event. In the service code... Or there is a typo in your question. See: .switchMap(this.extractData)

McflyDroid Over a year ago

ok just tryed with map, but same result. first time i got the result, after the http.get is not working and i get an empty result.

Thierry Templier Over a year ago

Okay. What do you mean by http.get is not working? Do you have a particular error?

McflyDroid Over a year ago

Wow great work, thank you. I edited my post, as i've said i'm starting to ask myself if it'snt a bug of htt.get of angular 2 in beta 15...

|

musale · Accepted Answer · 2016-05-23 12:06:01Z

0

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

answered May 23, 2016 at 12:06

musale

5848 silver badges18 bronze badges

2 Comments

McflyDroid Over a year ago

after searching, it seems that : In RxJS 5, flatMapLatest has been renamed to switchMap. So ??

musale Over a year ago

@McflyDroid owh! Been a sec on that. Thanks. Let me try on my end again and then will advise

Collectives™ on Stack Overflow

Rxjs Angular 2 async pipe working once

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related