Avoid data binding between variables in Angular 2

Question

I have a Class in Angular 2 and I need two variables with the same json value, but I will need to change one and I need to keep the another one as a backup of the first, like this:

export class Table {
  var1: any;
  var2: any;
}

Then, with a request to API:

ajax_request().then(data => {
  this.var1 = data;
  this.var2 = data;
});

If I make changes in this.var2, this.var1 will be changed too.

To avoid this, I'm making:

this.var1 = data;
this.var2 = JSON.stringify(this.var1);
this.var2 = JSON.parse(this.var2);

But I know It's not performance-friendly. What is the appropriated way to do that?

Community · Accepted Answer · 2017-05-23 12:25:43Z

1

This is not related to Angular2 data binding, this is just how JavaScript works.

You need to create a copy of the object to not have a change from one reference affect the other reference to the same object - like you already do in your current workaround.

See also https://stackoverflow.com/a/5344074/217408

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Nov 7, 2016 at 10:29

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

3 Comments

Daniel Campos Over a year ago

Thanks. Big (my) mistake to say It's an issue from Angular 2.

Günter Zöchbauer Over a year ago

Easy to make. It works the way you expect for primitive values like number, string, boolean, but for objects only the reference is copied, not the content.

Daniel Campos Over a year ago

Yes. After all, I found JSON.parse(JSON.stringify(this.var1)) is the best way to do that.

anshuVersatile · Accepted Answer · 2016-11-07 10:32:24Z

0

this.var1  = Object.assign({}, data);

answered Nov 7, 2016 at 10:32

anshuVersatile

2,0761 gold badge11 silver badges18 bronze badges

2 Comments

Daniel Campos Over a year ago

Not functional.

Toby Speight Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, not just the person asking now! Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply.

Collectives™ on Stack Overflow

Avoid data binding between variables in Angular 2

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related