How to add object inside array without reference

Question

My code is so far

var chartSeriesArray = [{"EnableAnimation": true,"AnimationDuration": 1}];

let refArray = chartSeriesArray; 
let clonedArray = [...chartSeriesArray]; // will clone the array

var x = [];
for(i=0;i<2;i++){
    x.push(clonedArray);
}   
x[0].foo = "bar";
console.log(x);

Console Output is

0:[{…}, foo: "bar"]
1:[{…}, foo: "bar"]

Whether I am trying to loop refArray or clonedArray in both the cases, it's added foo in both item 0 and 1, i want to add only in 0 for example.

Expected output is

0:[{…}, foo: "bar"]
1:[{…}]

I want to access 0 and 1 individually later.

I tried everything but nothing works, Any help is highly appreciated.

Further after all suggestions, when i am trying below code

var metadata = 
{
    "KPISDetail": [{
        "ChartSeriesList": {
            "EnableAnimation": true,
            "AnimationDuration": 1
        }
    }, {
        "ChartSeriesList": {
            "EnableAnimation": true,
            "AnimationDuration": 1
        }
    }]
}

var data = [];
var x = [];

for(var l=0;l<2;l++){
    data.push(metadata.KPISDetail[l].ChartSeriesList);
    x.push(...data.map(o => Object.assign({}, o)))
}
x[0].foo = "bar";
x[1].foo = "foo";
console.log(x);

Result should be 2 only because my loop is executing 2 times. But i am getting output 3 times, which is wrong. I am getting below output

You are just pushing the same array again and again... you should [clone](https://stackoverflow.com/a/21514254/1151408) it inside the loop — Yuri, Apr 05 '18 at 06:17
The important part is to understand that while the spread operator does clone the array, it does not clone the objects inside the array. So you end up with a _new_ array containing _references_ to the objects in the _old_ array. — Boaz, Apr 05 '18 at 06:24

score 0 · Answer 1 · answered Apr 05 '18 at 06:21

0

You should create array clone with cloned elements:

let clonedArray = chartSeriesArray.map((item) => Object.assign({}, item))

answered Apr 05 '18 at 06:21

Oleksandr Poshtaruk

2,062
15
18

@Yuri You are responding to the OP. This answer does exactly what you are describing. – Boaz Apr 05 '18 at 06:25
A part from jQuery being used here, it doesn't match very much with OP code, but clonedArray will contain the desired output. (Removing my previous comment) – Yuri Apr 05 '18 at 06:34

score 0 · Answer 2 · answered Apr 05 '18 at 06:22

You can try with the following:

var x = [];
for(i=0;i<2;i++){
    let real_clone = clonedArray.slice(0); // if you need to clone an array
    let real_clone = JSON.parse(JSON.stringify(clonedArray)); // if you need to clone both array and object
    x.push(real_clone);
}

score 0 · Answer 3 · answered Apr 05 '18 at 06:28

Issue is you create a single cloned array and pushed in multiple time. You need to create a new cloned array for every single push.

var chartSeriesArray = [{"EnableAnimation":true,"AnimationDuration": 1}];
var x = [];
for(i=0;i<2;i++){
    x.push([...chartSeriesArray]);
}   
x[0].foo = "bar";
console.log(x);

Pankaj Bisht · Accepted Answer · 2018-04-05T07:55:48.203

You are pushing clonedArray into x 2 time but you forgot about both time you are using same variable so memory allocation of both are same so if you want to add something on x element they reflect on both. To achieve desire result that you can use like that -

var chartSeriesArray = [{"EnableAnimation": true,"AnimationDuration": 1}];

let refArray = chartSeriesArray; 
let clonedArray = [...chartSeriesArray]; // will clone the array

var x = [];
for(i=0;i<2;i++){
    x.push(JSON.parse(JSON.stringify(clonedArray))); // will create magic 
}   
x[0].foo = "bar";
console.log(x);

Updated Code -

var metadata = 
{
    "KPISDetail": [{
        "ChartSeriesList": {
            "EnableAnimation": true,
            "AnimationDuration": 1
        }
    }, {
        "ChartSeriesList": {
            "EnableAnimation": true,
            "AnimationDuration": 1
        }
    }]
}

var data = [];
var x = [];

for(var l=0;l<2;l++){
    x.push(JSON.parse(JSON.stringify(metadata.KPISDetail[1].ChartSeriesList)))
}
x[0].foo = "bar";
x[1].foo = "foo";
console.log(x);

How to add object inside array without reference

4 Answers4