Angular Update instead of replace object

Question

I have this code on a service:

private appState = {};
  private state$;

  constructor() {
    this.state$ = new BehaviorSubject(this.appState);
  }

setState(key: string, value: any, persist: boolean = false) {
    this.appState[key] = value; // in Memory
    this.state$.next(this.appState); // inform subscribers
    if (persist) {
      if (typeof value === 'object') {
        localStorage[key] = JSON.stringify(value);
      } else {
        localStorage[key] = value;
      }
    }
  }

Then on my component:

I first have a method that sets some data:

setCurrentState() {
    this.appStateService.setState('state1', {name: 'Joe Patton', active: true});
}

Then another method where I want to update the above data:

updateCurrentState() {
    this.appStateService.setState('state1', { active: false });
}

My problem is that with the updateCurrentState I want to just update the active field but it's replacing the whole object.

How can I just update the needed data?

Dhananjai Pai · Accepted Answer · 2019-10-12 21:57:54Z

1

Update the function to not replace the object, but update only the keys sent, like below

It uses the Spread syntax and checks if the value exists already

setState(key: string, value: any, persist: boolean = false) {
    this.appState[key] = this.appState[key] ? {...this.appState[key],...value} : value; // check if exists, spread and update with value
    this.state$.next(this.appState);
    if (persist) {
      if (typeof value === 'object') {
        localStorage[key] = JSON.stringify(value);
      } else {
        localStorage[key] = value;
      }
    }
  }

answered Oct 12, 2019 at 21:57

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Angular Update instead of replace object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related