How can i update an array without updating the base array

Question

  mapConfig(config: IConfigItem[], dataModel: IDataModel): IConfigItem[] {
    return config.map(c => {
      const entries: [string, string][] = Object.entries(c);
      entries.forEach(e => {
        const configValue = e[0];
        const configKey = e[1];
        if (configKey in dataModel) {
          c[configValue] = dataModel[configKey];
        }
      });
      return { ...c };
    });
  }

I have this function in a service class , and i am calling this method from my angular component.

  const configCopy = [...this.config];
    const dataModelCopy = { ...this.dataModel };
    const mappedConfig: IConfigItem[] = this.loader.mapConfig(
      configCopy,
      dataModelCopy
    );

I am creating a copy of the this.config object and passing it to the mapconfig function so that it will not update the base object (this.config), but its always updating the base object this.config.Not sure if i am doing something wrong.

Roberto Zvjerković · Accepted Answer · 2020-02-13 11:30:30Z

1

Destructuring does a shallow copy of objects. That means the inner objects will be the same for the copy and the original. You need some kind of deep cloning.

The easiest (not the best) way is to stringify the original:

const configCopy = JSON.parse(JSON.stringify(this.config));

How to Deep clone in javascript

answered Feb 13, 2020 at 11:30

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

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

Comments

mbojko · Accepted Answer · 2020-02-13 11:45:29Z

1

It should be doable without a single mutation, more or less like this:

mapConfig(config: IConfigItem[], dataModel: IDataModel): IConfigItem[] {
    return config.map(c => {
        const entries: [string, string][] = Object.entries(c);
        const entriesToBeReplaced = entries.filter(([val, key]) => key in dataModel);

        const entriesWithReplacedValues = entriesToBeReplaced.map(([val, key]) => ({
            [val]: dataModel[key]
        }));

        return {
            ...c,
            Object.fromEntries(entriesWithReplacedValues)
        };
    });
}

answered Feb 13, 2020 at 11:45

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

Collectives™ on Stack Overflow

How can i update an array without updating the base array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related