Angular 9 Adding Multiple Objects in an array overrides the existing array

Question

I am using Angular 9 and am trying to add multiple objects in an array. But I see that on adding the new object the existing objects also gets changed. I suspect that is because the array has a reference to the object.

How do I change that.

Code:

userModel: UserModel = new UserModel()
userArray: any = new Array()

.....codes..constructors....oninits etc...

submit(){
    this.userModel.name = "Hello"
    this.userModel.age = "25"
    this.userModel.area = "IN"

    this.userArray.push(this.userModel)

    this.userModel.name = "World"
    this.userModel.age = "26"
    this.userModel.area = "WB"

    this.userArray.push(this.userModel)
}

The Output is

[{'name':'World, 'age':'26', 'area':'WB'},{'name':'World, 'age':'26', 'area':'WB'}]

What I want is

[{'name':'Hello, 'age':'25', 'area':'IN'},{'name':'World, 'age':'26', 'area':'WB'}]

score 3 · Accepted Answer · answered Jun 24 '20 at 12:34

You are pushing the same reference into the array everytime (this.userModel), without reassigning to a different object. Hence, this.userArray[0] and this.userArray[1] are the same object, and changes made to item at one index or this.userModel will affect the other. Try

submit(){
    this.userModel.name = "Hello"
    this.userModel.age = "25"
    this.userModel.area = "IN"

    this.userArray.push(this.userModel)

    this.userModel = {} as any; // reassign the reference to a new Object

    this.userModel.name = "World"
    this.userModel.age = "26"
    this.userModel.area = "WB"

    this.userArray.push(this.userModel)
}

score 1 · Answer 2 · answered Jun 24 '20 at 12:42

Instead of this.userArray.push(this.userModel), you will have to change it to this.userArray.push({ ...this.userModel }) at both the places.

This will fix your error.

The mistake you are doing is:

userModel variable stores the reference to the object and the same object is pushed as reference to the array when you do this.userArray.push(this.userModel).

So if you change userModel again, you are changing the object referenced by all the other variables.

score 1 · Answer 3 · answered Jun 24 '20 at 12:44

when you access this.userModel.name is refer to the same object. So You need to create a new UserModel Object and set values before pushing to the array.

you can do it simply like below

submit() {
    this.userModel.name = "Hello"
    this.userModel.age = "25"
    this.userModel.area = "IN"

    this.userArray.push({...this.userModel})

    this.userModel.name = "World"
    this.userModel.age = "26"
    this.userModel.area = "WB"

    this.userArray.push({...this.userModel})
}

score 0 · Answer 4 · answered Jun 24 '20 at 12:42

Like @Kaustubh said, you're just changing the same object and pushing it onto the array again.

Another way to do this would be to use the spread operator when pushing, to copy the object, rather than pushing the original. I like this better, since the array ends up with a copy instead of the original object.

submit() {
    this.userModel.name = "Hello"
    this.userModel.age = "25"
    this.userModel.area = "IN"

    this.userArray.push({ ...this.userModel })

    this.userModel.name = "World"
    this.userModel.age = "26"
    this.userModel.area = "WB"

    this.userArray.push({ ...this.userModel })
}

Angular 9 Adding Multiple Objects in an array overrides the existing array

4 Answers4