rxjs `toArray` is not working as expected

Question

I tried to de-duplicate the sent arrays and then merge them into arrays

import { from, BehaviorSubject, distinct, switchMap, toArray } from "rxjs";

let list$ = new BehaviorSubject([1, 2, 3, 2, 3, 5]);

list$.pipe(
  switchMap((e) => from(e)),
  distinct(),
  toArray()
).subscribe(console.log);

expected result:

BehaviorSubject -> [1, 2, 3, 2, 3, 5]
switchMap       -> 1 2 3 2 3 5
distinct        -> 1 2 3 5
toArray         -> [1, 2, 3, 5]
console.log     -> [1, 2, 3, 5]

Actually did not receive any value in console.log, why is this and how can I work as expected

"rxjs": "^7.2.0"

Mrk Sef · Accepted Answer · 2021-07-22 13:37:27Z

3

toArray only emits once the source observable completes.

The following should work as expected.

list$.pipe(
  take(1),
  switchMap(e => e),
  distinct(),
  toArray()
).subscribe(console.log);

If what you really want to do is filter unique values of an array, then RxJS's unique operator might be overkill. I wouldn't bother turning your array into a stream. Just filter the array.

list$.pipe(
  map(a => [...new Set(a)])
).subscribe(console.log);

edited Jul 22, 2021 at 13:37

answered Jul 22, 2021 at 4:10

Mrk Sef

8,0721 gold badge14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

januw a Over a year ago

Thank you for your answer, but my source will not stop after sending it once. Is there an operator that replaces toArray

Mrk Sef Over a year ago

Hey @januwa, If that's the case, I don't think you need RxJS to do your uniqueness filtering. See my update above.

Pianoman Over a year ago

Love the seconds example. saved my situation! I have an array of objects coming in from a stream. Needed a unique set of certain properties from the objects in the array (e.g. address) pipe( map( items => [...new Set(items.map(x => x.address))]) ) is what worked for me.

Barremian · Accepted Answer · 2021-07-22 10:35:04Z

1

So, if the source does not stop after the first notification, I assume that it will continue emit other arrays and that you want to filter the duplicates on each array emitted. In other words, if the list$ of your example emits first [1, 2, 3, 2, 3, 5] and then [3, 2, 1, 6, 6, 6,] what you want to log are 2 arrays, [1, 2, 3, 5] and [3, 2, 1, 6].

If my assumption is right, than the solution could be the following

list$.pipe(
  concatMap((e) => from(e).pipe(
    distinct(),
    toArray()
  )),
).subscribe(console.log);

The trick here is that each from(e) stream will complete when there are no more elements in the array. Therefore, since it completes, the toArray operator can actually work.

edited Jul 22, 2021 at 10:35

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

answered Jul 22, 2021 at 8:35

Picci

17.8k16 gold badges80 silver badges125 bronze badges

Comments

mbojko · Accepted Answer · 2021-07-22 08:17:21Z

1

scan could do the trick.

list$.pipe(
  switchMap((e) => from(e)),
  distinct(),
  scan((acc, curr) => [...acc, curr], []),
).subscribe(console.log);
// will print: [1], [1, 2], [1, 2, 3], [1, 2, 3, 5]

You could insert debounceTime in the pipe, if you need less emissions:

list$.pipe(
  switchMap((e) => from(e)),
  distinct(),
  scan((acc, curr) => [...acc, curr], []),
  debounceTime(0)
).subscribe(console.log); // will print [1, 2, 3, 5]

answered Jul 22, 2021 at 8:17

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

Comments

Barremian · Accepted Answer · 2021-07-22 10:36:36Z

If the only requirement is to remove duplicates, you're better off handling it using vaniall JS. See here: https://stackoverflow.com/a/9229821/6513921

We'll take the shortest solution without any regards to performance: uniq = [...new Set(array)];

You could then write a custom RxJS operator to include it in the pipe with other operators.

const { BehaviorSubject, from } = rxjs;
const { map, switchMap } = rxjs.operators;

const uniqueArray = (obs$) => {
  return (obs$) => {
    return obs$.pipe(
      map(arr => [...new Set(arr)])
    );
  };
};

const sub = new BehaviorSubject([1, 2, 3, 2, 3, 5]);

sub.asObservable().pipe(
  uniqueArray()
).subscribe(console.log);

sub.next([6, 3, 1, 6, 7, 1, 1]);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://unpkg.com/[email protected]/bundles/rxjs.umd.min.js"></script>

Collectives™ on Stack Overflow

rxjs `toArray` is not working as expected

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related