RxJS distinctUntilChanged - object comparison

Question

I have a stream of objects and I need to compare if the current object is not the same as the previous and in this case emit a new value. I found distinctUntilChanged operator should do exactly what I want, but for some reason, it never emits value except the first one. If I remove distinctUntilChanged values are emitted normally.

My code:

export class SettingsPage {
    static get parameters() {
        return [[NavController], [UserProvider]];
    }

    constructor(nav, user) {
        this.nav = nav;
        this._user = user;

        this.typeChangeStream = new Subject();
        this.notifications = {};
    }

    ngOnInit() {

        this.typeChangeStream
            .map(x => {console.log('value on way to distinct', x); return x;})
            .distinctUntilChanged(x => JSON.stringify(x))
            .subscribe(settings => {
                console.log('typeChangeStream', settings);
                this._user.setNotificationSettings(settings);
            });
    }

    toggleType() {
        this.typeChangeStream.next({
            "sound": true,
            "vibrate": false,
            "badge": false,
            "types": {
                "newDeals": true,
                "nearDeals": true,
                "tematicDeals": false,
                "infoWarnings": false,
                "expireDeals": true
            }
        });
    }

    emitDifferent() {
        this.typeChangeStream.next({
            "sound": false,
            "vibrate": false,
            "badge": false,
            "types": {
                "newDeals": false,
                "nearDeals": false,
                "tematicDeals": false,
                "infoWarnings": false,
                "expireDeals": false
            }
        });
    }
}

Answer 1

I had the same problem, and fixed it with using JSON.stringify to compare the objects:

.distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))

This code will work if the attriutes are in the same order, if not it may break, so here's a quick fix for that (be careful this method is slower)

.distinctUntilChanged((a, b) => JSON.stringify(a).split('').sort().join('') === JSON.stringify(b).split('').sort().join(''))

Answer 2

When you have lodash in your application anyway, you can simply utilize lodash's isEqual() function, which does a deep comparison and perfectly matches the signature of distinctUntilChanged():

.distinctUntilChanged(isEqual),

Or if you have _ available (which is not recommended anymore these days):

.distinctUntilChanged(_.isEqual),

Answer 3

I finally figure out where problem is. Problem was in version of RxJS, in V4 and earlier is different parameters order than V5.

RxJS 4:

distinctUntilChanged = function (keyFn, comparer)

RxJS 5:

distinctUntilChanged = function (comparer, keyFn)

In every docs today, you can find V4 parameters order, beware of that!

Answer 4

You can also wrap the original distinctUntilChanged function.

function distinctUntilChangedObj<T>() {
  return distinctUntilChanged<T>((a, b) => JSON.stringify(a) === JSON.stringify(b));
}

This lets you use it just like the original.

$myObservable.pipe(
  distinctUntilChangedObj()
)

Cavets

This method also has several pitfalls as some commenters have pointed out.

1. This will fail if the objects fields are ordered differently;

JSON.stringify({a:1, b:2}) === JSON.stringify({b:2, a:1})
// will return false :(

2. This JSON.stringify will also throw an error if the object has circular references. For example stringify'ing something from the firebase sdk will lead you to these errors:

TypeError: Converting circular structure to JSON

Robust Solution

Use the deep-object-diff library instead of JSON.stringify. This will solve the above problems

import { detailedDiff } from 'deep-object-diff';

function isSame(a, b) {
  const result = detailedDiff(a, b); 
  const areSame = Object.values(result)
    .every((obj) => Object.keys(obj).length === 0);
  return areSame;
}

function distinctUntilChangedObj<T>() {
  return distinctUntilChanged<T>((a, b) => isSame(a, b));
}

Answer 5

From RxJS v6+ there is distinctUntilKeyChanged

https://www.learnrxjs.io/operators/filtering/distinctuntilkeychanged.html

const source$ = from([
  { name: 'Brian' },
  { name: 'Joe' },
  { name: 'Joe' },
  { name: 'Sue' }
]);

source$
  // custom compare based on name property
  .pipe(distinctUntilKeyChanged('name'))
  // output: { name: 'Brian }, { name: 'Joe' }, { name: 'Sue' }
  .subscribe(console.log);

Answer 6

Mehdi's solution although fast but wouldn't work if the order is not maintained. Using one of deep-equal or fast-deep-equal libraries:

.distinctUntilChanged((a, b) => deepEqual(a, b))

Answer 7

The answers suggesting a deep compare all fail if the observable is actually emitting a modified version of the same object, as the "last" value that is passed to the comparison will be the same as the current, every time.

We've hit this using a BehaviorSubject where it just so happens that the same object is passed to .next() each time.

In this case, there is no solution using the default distinctUntilChanged, no matter what comparison function you use.

Answer 8

If you change the value mutably, none of the other answers work. If you need to work with mutable data structures, you can use distinctUntilChangedImmutable, which deep copies the previous value and if no comparison function is passed in, will assert that the previous and the current values deep equals each other (not === assertion).

Answer 9

You can also make your own filter:

function compareObjects(a: any, b: any): boolean {
  return JSON.stringify(a) === JSON.stringify(b);
}

export function distinctUntilChangedObject() {
  return function<T>(source: Observable<T>): Observable<T> {
    return new Observable(subscriber => {
      let prev: any;
      let first = true;
      source.subscribe({
        next(value) {
          if (first) {
            prev = value;
            subscriber.next(value);
            first = false;
          } else if (!compareObjects(prev, value)) {
            prev = value;
            subscriber.next(value);
          }
        },
        error(error) {
          subscriber.error(error);
        },
        complete() {
          subscriber.complete();
        }
      });
    });
  };
}

Answer 10

For those considering JsonStringify to be slow or unreliable (because of different property order) the example below might help for an object array. Its primary key is a property called 'id'.

same(prev: BasketItem[], next: BasketItem[]): boolean {
    if (prev?.length != next?.length)
        return false;

    // verify that all of the ids are contained in both arrays
    for (var i = 0; i < prev.length; i++) {
        if (!prev.some(x => x.id == next[i].id))
            return false;
        if (!next.some(x => x.id == prev[i].id))
            return false;
    }
    return true;
}

I call it a as follows

.pipe(distinctUntilChanged((prev, curr) => this.same(prev, curr)))

example for the object array :

[ {id:'d7273481-e99b-4d72-84eb-826fbf52e4e9' , price:'44.02'}

, {id:'11f125e3-c190-4177-a656-7b107a7d687c' , price:'54.88'} ]

Answer 11

I had to do this:

import { cloneDeep, isEqual } from 'lodash-es'

observable$.pipe(
  ... other stuff
  map(x => cloneDeep(x)),
  distinctUntilChanged(isEqual)
  ... other stuff
)

if x is getting mutated, cloneDeep seems to be necessary to make distinctUntilChanged work