Pagination Ideas for Angular2 and ReactiveX

Question

I'm learning ReactiveX. I've snipped the error checking, logging, and other bits out to make this easier to read.

I have a service that returns a collection of objects as JSON:

getPanels() {
    return this.http.get(this._getPanelsUrl)
        .map(panels => <Panel[]> panels.json());            
}

My component calls the service method and stores the data in an array:

panels: Panel[] = [];

ngOnInit(){
    this._PanelService.getPanels()
        .subscribe(data => this.panels = data);  
}

The goal is to display this data in groups in my template:

<ol>
    <li *ngFor="#panel of panels">
      <h3>{{panel.startDate}}</h3>
    </li>
</ol>

Now I want to add pagination and display only three or four panels at a time.

My first idea was to use bufferCount to emit the objects in groups:

getPanels() {
    return this.http.get(this._getPanelsUrl)
        .map(panels => <Panel[]> panels.json())
        .bufferCount(3,3);
}

Now I have a multidimensional array, so I have to update the component accordingly:

panels: Array<Panel[]> = [];

ngOnInit(){
    this._PanelService.getPanels()
        .subscribe( data => this.panels = data );
}

I thought I would have a nice and tidy array with each index having three members of the collection. I was wrong, and the entire collection is now stored in data[0]. Next, I tried switching the chain up a bit:

getNextPanel() {
    return this.http.get(this._nextPanelUrl)
        .bufferCount(3,3)
        .map(res => <Panel[]> res.map(r => <Panel> r.json()));
}

Whoa. I obviously need someone to save me from myself at this point. Look at my lambdas! Data isn't even going to flow all the way back to the component at this point. This is when I started thinking maybe I don't need to learn how to do this the ReactiveX way … .

My next course was to try and iterate through the values with Angular. I tried using a few variables with the slice pipe:

<ol>
    <li *ngFor="#panel of (panels | slice:start:items)">
        <h3>{{panel.startDate}}
    </li>
</ol>
<button (click)="start = start + start"></button>

Even though Angular 2 is still in beta, I could tell that I was getting tired when the parser kept barking at me for using operators and expressions where they don't belong.

I'm ready to learn from these mistakes so I can make bigger ones. Any suggestions?

[EDIT]

I've decided to use ng2-pagination because it does exactly what I want it to do. I'm not going to post that as the answer, however, because I still want to try and implement it with rxjs.

So if you've come this far, and you just need something that works, ng2-pagination (in beta 2 as of this writing) works very well.

you wanted to implement [kind of this](http://stackoverflow.com/a/27514478/2435473)? — Pankaj Parkar, Feb 25 '16 at 21:17
Did you try rxjs [window operator](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/window.md#example)? — Sasxa, Feb 25 '16 at 21:18
You can check this repo https://github.com/michaelbromley/ng2-pagination to look how does it — Eric Martinez, Feb 25 '16 at 21:51
@EricMartinez I came across that yesterday, too. I decided to use it, because it works, but I'd still like to learn to implement it in RxJs. — wolfhoundjesse, Feb 26 '16 at 17:20

score 0 · Answer 1 · answered Jun 11 '18 at 22:23

Really late, but I hope this might help someone else with this issue.

I think the problem with your implementation is that you are overwriting the this.panel variable with each onNext event on the subscriber.

With this change should work as expected:

getPanels() {
  return this.http.get(this._getPanelsUrl)
    .map(panels => <Panel[]> panels.json())
    .bufferCount(3)
    .toArray();
}

and then:

panels: Panel[][] = [];
ngOnInit(){
    this._PanelService.getPanels()
      .subscribe( data => { this.panels = data } );
}

The idea is to merge all onNext events into an array (using the toArray method) that will be emited as the single onNext of that new Observer, and will contain all events.

Pagination Ideas for Angular2 and ReactiveX

1 Answers1