CODEWITHSUNDEEP
angularrxjsobservable
makkasi
makkasi

Reputation: 7288

Get angular Observable stream as array

I have list, that should simulate the stream :

list = [
  {name : 'Str1', age: 10},
  {name : 'Str2', age: 10},
  {name : 'Str3', age: 10}
];

and I've created an Observable from this list:

Observable.from(this.list).skip(this.currentPage * this.pageSize).take(this.pageSize).subscribe(data => this.pagerList = data, console.error);

And in the subscribe method I get the values one by one. How I'm supposed to wait for the whole data to be returned and then to get the whole list. There is take() operator, and after it the Observable have to stop.

I don't want to put every value one by one in the array.

I'm new here, not only for angular, but for javascript as well.

Upvotes: 10

Views: 9353

Answers (3)

kemsky
kemsky

Reputation: 15261

I think this is more appropriate solution:

Observable.of(this.list).map(x => x.slice(this.currentPage * this.pageSize)).map(x => x.slice(0, this.pageSize)).subscribe(data => this.pagerList = data, console.error);

Upvotes: 1

yurzui
yurzui

Reputation: 214007

Have you tried to use toArray operator?.

let list = [
  { name: 'Str1', age: 10 },
  { name: 'Str2', age: 10 },
  { name: 'Str3', age: 10 },
  { name: 'Str4', age: 10 },
  { name: 'Str5', age: 10 },
  { name: 'Str6', age: 10 }
];

let currentPage = 2;
let pageSize = 2;

Rx.Observable.from(list)
  .skip(currentPage * pageSize)
  .take(pageSize)
  .toArray()
  .subscribe(data => console.log(data), console.error);
<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.min.js"></script>

Upvotes: 10

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657068

The scan operator should do what you want

Observable.from(this.list)
.skip(this.currentPage * this.pageSize)
.take(this.pageSize)
.scan([], acc, curr) => {acc.push(curr); return acc;});
.subscribe(data => this.pagerList = data, console.error);

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan

Upvotes: 4

Related Questions