How to merge multiple RxJS AjaxObservable calls to make a single observable?

Question

I have an Angular 4 app with a product list component that displays the names of the products. The names of the products are retrieved from the server API. There are 1000 products which has to be retrieved in a few ajax calls AjaxObservable. Every call return 200 products, so have to make 5 calls to return all the products.

How can I achieve the above with AjaxObservable? Should I merge all the observables or create single only and allow the UI to subscribe?

for (var i = 0; i < 5; i++) {
   var source = Rx.Observable.ajax({ url: 'products', method: 'GET' });
}

score 1 · Answer 1 · answered Jul 03 '17 at 20:05

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/combinelatest.md

let obs1: Observable<any> = Observable.of('val1', 'val2');
let obs2: Observable<any> = Observable.of('val3', 'val4');
Rx.Observable.combineLatest(obs1, obs2).subscribe(values => {
    console.log(values) //values is array - this statement will print [val2, val4]
});

Also you could take a look at this answer: Rxjs: Observable.combineLatest vs Observable.forkJoin

How to merge multiple RxJS AjaxObservable calls to make a single observable?

1 Answers1