Observable iteration complete event

Question

I'm subscribing to a BehaviorSubject routes$ that emits an array of directions

e.g. ['left', 'top', 'left']

Then I want to log each element of this array with 200ms delay, now after all element have been logged, I want to log route finished.

I tried the complete event ()=>{} and finally() operator but they both don't fire since routes$ is still alive and might emits new directions.

/** Stream recent directions */
this.route$.switchMap(() => {
  return Observable
    .interval(200)
    .timeInterval()
    .take(this.route$.getValue().length)
}).subscribe(
  (v) => {
    if (v.value === this.route$.getValue().length) return;
    let i = v.value;
    this.moveStep(this.route$.getValue()[i]);
  }
);

Currently I'm using this workaround

.subscribe(
  (v) => {
    if (v.value === this.route$.getValue().length) return;
    let i = v.value;
    this.moveStep(this.route$.getValue()[i]);

    /** Check if it is the last iteration */
    if(i + 1 === this.route$.getValue().length){
      console.log('route finished');
      this.state = PlayerState.Idle;
    }
  }
);

Is there a native way to achieve this in observable?

martin martin · Accepted Answer · 2016-12-10T10:25:53

If I understand correctly what you're trying to do you want to emit a value when the array passed to the BehaviorSubject has been completely iterated and you want to get just the last value.

Try to avoid using .getValue() directly from inside the Observable chain because the content of .getValue() is something you should be working with in the chain already.

var routes$ = new BehaviorSubject(['default']);

routes$.switchMap((arr) => {
    return Observable.interval(200)
        .take(arr.length)
        .map(i => arr[i])
        .timeInterval()
        .do(null, null, () => console.log('Complete'));
}).subscribe(value => {
    console.log(value);
});

routes$.next(['left', 'top', 'left']);

setTimeout(() => {
    routes$.next(['top', 'right', 'down']);
}, 1000);

This prints to console:

TimeInterval { value: 'left', interval: 208 }
TimeInterval { value: 'top', interval: 241 }
TimeInterval { value: 'left', interval: 207 }
Complete
TimeInterval { value: 'top', interval: 204 }
TimeInterval { value: 'right', interval: 200 }
TimeInterval { value: 'down', interval: 205 }
Complete

See live demo: https://jsbin.com/muxasa/5/edit?js,console

Notice that the ['default'] is never reemitted because switchMap() receives a new array when calling routes$.next(['left', 'top', 'left']);

Observable iteration complete event

2 Answers