.take() operator is not working on the Observables - angular6

Question

The service returns me an array with 40 objects but all I need in my app are the first 5. I've made some research and I found out that the operator that fit the case is Take, but it doesn't do anything: when I call the service, it returns me all the 40 elements.
What am I doing wrong?
In the service:
getData(valueS): Observable<any> {
return Observable.from(
this.http.get<any>(`${this.URL}`)
);
}
In my component's ts:
this.dataService.getData(this.valueSelected)
.pipe(
delay(1000),
take(5)
)
.subscribe((res: any) => {
this.dataContainer = res.main;
console.log(res);
console.log(this.dataContainer);
this.buildWidget();
});

Answer 1

According to the docs, the .take() operator does this:
emit only the first n items emitted by an Observable
Unless your service is emitting the 40 objects one by one, then take is not a good operator to do what you want. What you need is probably just the native .slice() from javascript, which you can use Observable's .map() operator to manipulate it:
this.dataService.getData(this.valueSelected)
.pipe(
delay(1000),
map(arr=>arr.slice(0,5))//take the first five elements
)
.subscribe((res: any) => {
this.dataContainer = res.main;
console.log(res);
console.log(this.dataContainer);
this.buildWidget();
});