RxJs Observable with infinite scroll OR how to combine Observables

I have a table which uses infinite scroll to load more results and append them, when the user reaches the bottom of the page.

At the moment I have the following code:

var currentPage = 0; var tableContent = Rx.Observable.empty();  function getHTTPDataPageObservable(pageNumber) {     return Rx.Observable.fromPromise($http(...)); }  function init() {     reset(); }  function reset() {     currentPage = 0;     tableContent = Rx.Observable.empty();     appendNextPage(); }  function appendNextPage() {     if(currentPage == 0) {         tableContent = getHTTPDataPageObservable(++currentPage)                 .map(function(page) { return page.content; });     } else {         tableContent = tableContent.combineLatest(             getHTTPDataPageObservable(++currentPage)                     .map(function(page) { return page.content; }),             function(o1, o2) {                 return o1.concat(o2);             }         )     } } 

There's one major problem:

Everytime appendNextPage is called, I get a completely new Observable which then triggers all prior HTTP calls again and again.

A minor problem is, that this code is ugly and it looks like it's too much for such a simple use case.


How to solve this problem in a nice way?

Is is possible to combine those Observables in a different way, without triggering the whole stack again and again?


Category: reactive programming Time: 2016-07-29 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.235 (s). 12 q(s)