Angular 4 splice duplicating array objects

Question

I have some code I simplified for this question.

    this.getDataRuleList.splice(this.count, 1, dataRuleData);
    console.log(this.getDataRuleList);
    this.count += 1;

getDataRuleList is returning an array of objects from a service. It is also being bound to a PrimeNg TurboTable without a problem.

    // get method to get service collection
    get getDataRuleList(): IDataRule[] {
      return this._dataRuleListService.dataRuleList;
    }

When I edit a row, I am trying to update an object in my bound array (getDataRuleList) by replacing the whole object with a new object. I'm using the splice method for this. The problem is, every object I replace becomes identical (see image for a better understanding). The value i'm sticking in the spliced value's place is different every time (dataRuleData) but all my array elements become this value. I'm assuming it has something to do with references but how can I avoid this happening?

image of issue

Chunbin Li · Accepted Answer · 2018-06-23 03:31:36Z

2

you can clone a new object

const cloneData = Object.assign({},dataRuleData);
this.getDataRuleList.splice(this.count, 1,cloneData);

if you need to use deep clone you can check this example

const deepCloneData = JSON.parse(JSON.stringify(obj1));

edited Jun 23, 2018 at 3:31

answered Jun 23, 2018 at 2:37

Chunbin Li

2,2542 gold badges19 silver badges32 bronze badges

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

2 Comments

Michael Over a year ago

That worked perfectly! Very easy and clean solution. Thanks so much.

Chunbin Li Over a year ago

@Michael I suggest you use @baj9032 answer, it's simple to use :)

baj9032 · Accepted Answer · 2018-06-23 03:23:56Z

2

You can es6 splice operator for the clone

example

const cloneData = {...dataRuleData};

answered Jun 23, 2018 at 3:23

baj9032

2,5923 gold badges25 silver badges41 bronze badges

Collectives™ on Stack Overflow

Angular 4 splice duplicating array objects

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related