Cloning objects TypeScript [duplicate]

Question

I am working with Angular 2 with TypeScript. I have User Management component where I have table of whole users.

When any user in table is clicked then forms appeaer with his whole properties to edit. Choosing user occurs event as below:

 onUserSelected(event) {
        var selectedId = event.data.id;
        this.selectedUser = this.users.filter(user => user.id === selectedId)[0]
    }

The problem is when selectedUser is being edited his properties also changes in table and it doesnt look so good. I tried to create copy myself as below but it didn't help - user class

 clone() {
        var cloned = new User(this.id, this.login, this.name, this.surname, this.phone);
        return cloned;
    }

Maybe I am doing something which is not good practice in Angular2?

Try some already raised question on stackoverflow stackoverflow.com/questions/28150967/typescript-cloning-object — Kishan Mundha
– Kishan Mundha, Commented Jan 28, 2017 at 9:27

Amit · Accepted Answer · 2017-01-28 15:58:30Z

80

Try using

this.user = Object.assign({}, currentObject);

As mentioned by @AngularFrance, this will only work for shallow-copying objects, seek another implementation if there's a need to deep-copy an object.

edited Jan 28, 2017 at 15:58

answered Jan 28, 2017 at 9:26

Amit

4,35323 silver badges25 bronze badges

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

8 Comments

AngularChef Over a year ago

Side note: Object.assign() is for shallow copies (NOT deep copies), which in the case of this question should work.

Amit Over a year ago

You're right, edited.

AngularChef Over a year ago

For deep copies, there's always the controversial obj = JSON.parse(JSON.stringify(o));

debiasej Over a year ago

Spread is syntactic sugar: this.user = { ...currentObject }

Ananda Over a year ago

@AngularChef does JSON.stringify work well with dates? I had issues in the recent past.

|

almog · Accepted Answer · 2017-01-31 14:23:09Z

18

You can use lodash :

https://lodash.com/docs#cloneDeep

lodash is recommended for lot of objects / array manipulations

answered Jan 31, 2017 at 14:23

almog

8382 gold badges9 silver badges18 bronze badges

3 Comments

slartidan Over a year ago

How can I use it? _.cloneDeep(...) gives me an Cannot find name '_'. error.

FBH Over a year ago

import * as _ from 'lodash';

Arlo Over a year ago

import { cloneDeep } from 'lodash';

András Szepesházi · Accepted Answer · 2017-01-28 09:31:35Z

7

You could bind your editor form to an empty User object, say editUser, instead of the selectedUser variable (which points to an element of your user collection). In your onUserSelected(event), you'd initialize editUser via cloning the mutable properties of the selected user objects. Upon submitting the edit form ((ngSubmit)="editSubmit()"), you replace the original properties in the selected user object in the user collection.

Something along the lines of:

editUser: User = new User();
selectedId: number;
selectedUser: User;

onUserSelected(event) {
    this.selectedId = event.data.id;
    this.selectedUser = this.users.filter(user => user.id === this.selectedId)[0];
    this.editUser = this.simpleClone(this.selectedUser);
}

editSubmit(event) {
    this.selectedUser = this.simpleClone(this.editUser);
}

simpleClone(obj: any) {
    return Object.assign({}, obj);
}

The simpleClone implementation is not suitable for deep cloning, so if your User objects hold references to other objects, this should be turned into a proper cloning function.

answered Jan 28, 2017 at 9:31

András Szepesházi

6,7835 gold badges51 silver badges63 bronze badges

1 Comment

Gil Over a year ago

by using an any type simpleClone is bypassing type safety :(

Collectives™ on Stack Overflow

Cloning objects TypeScript [duplicate]

3 Answers 3

8 Comments

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

3 Comments

1 Comment

Linked

Related