15

I want to take 3 last elements from an observable. Let's say that my timeline looks like this:

--a---b-c---d---e---f-g-h-i------j->

where: a, b, c, d, e, f, g, h, i, j are emitted values

Whenever a new value is emitted I want to get it immediately, so it can look like this:

[a]
[a, b]
[a, b, c]
[b, c, d]
[c, d, e]
[d, e, f]
[e, f, g]
[f, g, h]
... and so on

I think that this is super useful. Imagine building a chat where you want to display 10 last messages. Whenever a new message comes you want to update your view.

My attempt: demo

feerlay
  • 2,286
  • 5
  • 23
  • 47

2 Answers2

29

You can use scan for this:

from(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u'])
  .pipe(
    scan((acc, val) => {
      acc.push(val);
      return acc.slice(-3);
    }, []),
  )
  .subscribe(console.log);

This will print:

[ 'a' ]
[ 'a', 'b' ]
[ 'a', 'b', 'c' ]
[ 'b', 'c', 'd' ]
[ 'c', 'd', 'e' ]
...
[ 's', 't', 'u' ]

The bufferCount won't do what you want. It'll emit only when each buffer is exactly === 3 which means you won't get any emission until you post at least 3 messages.

Jan 2019: Updated for RxJS 6

martin
  • 93,354
  • 25
  • 191
  • 226
  • Upvote for correct answer. I have a bit another with low case – Suren Srapyan Dec 20 '17 at 17:26
  • Thank you! It does exactly what I wanted to achieve – feerlay Dec 20 '17 at 17:29
  • very clever! Any idea why this isn't a built in operator? I must just be hitting all the uncommon use cases for RxJs because I keep looking for things like this that aren't already built in. – Simon_Weaver Jan 13 '18 at 21:32
  • how to convert this to a reusable operator? – Simon_Weaver Jan 13 '18 at 21:34
  • 3
    Won't the accumulated array just keep growing though? Seems like a memory leak. – adam0101 Oct 08 '19 at 01:36
  • 1
    This is a great answer, but a more succinct and functional version could use ```scan((acc, val) => [...acc, val].slice(-3), [])``` – jjjjs May 06 '20 at 21:40
  • 1
    @adam0101 no, it won't. The accumulator array will never grow past size 4. What you return from the scan function is what gets passed as the `acc` parameter on the next run. So for a run when it's already size 3, it will `.push(val)` making it size 4, then it will get cut down to size 3 again via `.slice(-3)`. It's not leaking. – Teodor Sandu Dec 29 '22 at 05:43
5

You can look at Observable#bufferCount function. One difference is that it wants at least 3 times to emit (first parameter, in this example).

const source = Rx.Observable.interval(1000);
const example = source.bufferCount(3,1)
const subscribe = example.subscribe(val => console.log(val));
<script src="https://unpkg.com/@reactivex/rxjs@5.4.3/dist/global/Rx.js"></script>
Suren Srapyan
  • 66,568
  • 14
  • 114
  • 112