I dont get rxjs 6 with angular 6 with interval, switchMap, and map

Question

I want to update my rxjs code to 6 got I don't get it.

Before I had the below that wouth poll for new data every 5 seconds:

import { Observable, interval } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';

var result = interval(5000).switchMap(() => this._authHttp.get(url)).map(res => res.json().results);

Now...of course, it's broken and the documentation leaves me nowhere to go.

How do I write the above to conform to rxjs 6?

Thanks

Solution 1

The code should be something like the following. You need to use the pipe operator.

import { interval } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';

const result = interval(5000).pipe(
switchMap(() => this._authHttp.get(url)),    
map(res => res.results)
)

Solution 2

After lot of research I could came up with the following updated approach from RxJs' 6 with Angular 6.

The search API is called after each interval of 5 sec and unsubscribed once the count > 5 :

let inter=interval(5000)

let model : ModelComponent;
model=new ModelComponent();
model.emailAddress="[email protected]";


let count=1;
this.subscriber=inter.pipe(
          startWith(0),
          switchMap(()=>this.asyncService.makeRequest('search',model))
        ).subscribe(response => {
          console.log("polling")
          console.log(response.list)
          count+=1;
          if(count > 5){
            this.subscriber.unsubscribe();
          }
        });

API request :

   makeRequest(method, body) : Observable<any> {
    const url = this.baseurl + "/" + method;

    const headers = new Headers();
    this.token="Bearer"+" "+localStorage.getItem('token'); 
    headers.append('Authorization', this.token);
    headers.append('Content-Type','application/json');

    const options = new RequestOptions({headers: headers});
    return this.http.post(url, body, options).pipe(
        map((response : Response) => {
            var json = response.json();                

           return json; 
        })
    );
}

Dont forget to unsubscribe to avoid memory leak.

ngOnDestroy(): void {
if(this.subscriber){
  this.subscriber.unsubscribe();
}

}

Comments

[martin]

It's broken how? What you have worked only because you were importing directly from rxjs which is wrong and imports all "prototype" operators which is not what you want if you later import from import { switchMap, map } from 'rxjs/operators';

[Tampa]

Here is the error when usijng your suggestion: [ts] Property 'pipe' does not exist on type 'OperatorFunction<{}, {}>'.

[siva636]

Make sure add pipe in the import list: import { Observable, interval, pipe } from 'rxjs';

[Tampa]

I think this._authHttp.get(url).pipe rather than this._authHttp.get(url) ).pipe . this git rid of the error

[Tampa]

But now I get [ts] Property 'json' does not exist on type '{}'. for the res.json()

[funkizer]

The new HttpClient returns just the data, no response (unless you set observe: 'response' in the options). So you can just remove .json()

[Eliseo]

probably you need'nt pipe(res=>res.json().result)