Angular2 RxJs: simple take() from http returned observable

Question

I simply try to .take(5) from an http returned observable:

this.dataObservable = this._service.getData()
                                   .take(5);

and use it in HTML like so:

<tr *ngFor="let record of dataObservable | async">

This works. But I get all the records, I just want 5. What am I doing wrong? Thanks.

In the _service I return the http observable:

getData(): Observable<any> {
  url = '/getData';
  this._data = this._http.get(url)
    .map(response => this.extractData(response));
  return this._data;
}

slaesh · Accepted Answer · 2016-09-21 12:25:42Z

4

This .take(5) will take 5 emits of your Observable, not 5 elements of that containing data.

You should limit it to 5 in your .map function.

Or .subscribe to that observable and in that function you will limit incoming data in store it in a local variable which will be bound to your template.

getData(): Observable<any[]> { // returns an array, right??
  url = '/getData';
  this._data = this._http.get(url)
    .map(response => this.extractData(response));
  return this._data;
}

// in your component

this.yourService.getData().subscribe(
   dataArray => this.data = dataArray.slice(0, 5),
   err => console.log(err)
);

this.data will be bound to your template.

edited Sep 21, 2016 at 12:25

answered Sep 21, 2016 at 11:56

slaesh

17k6 gold badges53 silver badges54 bronze badges

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

1 Comment

RobSeg Over a year ago

Thank you, that makes sense. Could you expand how to limit the response in the .map with equivalent of .take what I'm trying to achieve?

Collectives™ on Stack Overflow

Angular2 RxJs: simple take() from http returned observable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related