How to check json object with distinctUntilChanged before subscribing to observable

Question

I want to subscribe to observable only when the value of my JSON object which I am receiving from observer subject change:

 searchedName = '';


  filters = {
  "page": 1,
  "perPage": 10,
  "sortOrder": "asc",
  "tag": "allUsers",
  "sortBy": "firstname"
}
  getUsers(e)
  {
    console.log("searched")
    const searchedKeyword = this.searchedName.trim();
    if(searchedKeyword !== '')
    this.filters['name'] = searchedKeyword
    this._service.triggerCallForUsers(this.filters)
  }
   ngOnInit()
{
  //Initially called to load users..
   this._service.triggerCallForUsers(this.filters)

   //Subscribe to fetch users
    this._service.startFetchingUsers$
      .distinctUntilChanged()
      .subscribe((filters) => {
        console.log("filters", filters)
        if (filters) {
          this._service.getUsersByFilter(filters)
            .subscribe(
              users => {
                console.log('users', users);

              },
              error => {}
            );
        }

      })
}

Where filters are:

Is this possible?

Trying to solve as below:

.distinctUntilChanged((a, b) => {
  console.log('compare', b['name'], a['name'], b['name'] === a['name']);
  return a === b
})

// when first time subscribe output:- no output for compare

//When I add 's' searchedName field i.e filters which is sent to next() will contain

filters['name']

output: - compare s undefined false

// If I change searchedName to 'sd':

output:- compare sd sd true.

Update:

   <input type="text" (keyUp.enter)="getUsers($event)" [(ngModel)]="searchedName">

Service:

In service I call next() on observable:

private startFetchingUsers = new BehaviorSubject < any > (null);
startFetchingUsers$ = this.startFetchingUsers.asObservable();



triggerCallForCareGroup(filter) {

    this.startFetchingUsers .next(filter);
  }

m1ch4ls m1ch4ls · Accepted Answer · 2018-08-16T15:21:49

If you need deep equality, try using for example isEqual from lodash.

Also you have too much logic in subscribe - consider using do/tap for side-effects and mergeMap for merging other Observables.

import { isEqual } from 'lodash';

this._service.startFetchingUsers$
    .distinctUntilChanged(isEqual)
    .do(filters => console.log("filters", filters))
    .mergeMap(filters => this._service.getUsersByFilter(filters))
    .do(users => console.log('users', users))
    .subscribe({
        error(error) {
            console.error(error);
        },
    });

when I change name parameter in filter json I get updated value a['name'] and b['name'] as same.

This suggest there might also be problem somewhere else in your code. Can you share the code where you call startFetchingUsers.next(newFilters)?

Update

You are mutating the this.filters object and therefore you are not seeing changes because a === b always holds. The object itself is the same! Use shallow copy like this: this._service.triggerCallForUsers({ ...this.filters })

How to check json object with distinctUntilChanged before subscribing to observable

1 Answers