javascript duplicates for on object bug

Question

So I have an array of array of objects and wish to export that array to another array to use on future functions, but the problem is that on the for (for each array) the first run goes well but after the first run it adds the same content to the past run for example if I have 2 arrays with different content and execute the for function the first array is the same as the second array.

Here is the code:

 var mark = [];
//defult 
var x_mark = { c_mark_desc_col:[], c_mark_col: null,  c_mark_col_image: null, 
            c_mark_action: "click", c_mark_origin:[0,0], c_mark_col_valor: false,
            c_mark_style: [null]
            //,c_cluster: cluster[0]         
};
    for (var i = 0; i < extras.marks.length; i++) {

        mark[i] = x_mark;
        if(!(extras.marks[i].mark_desc_col === "" || typeof extras.marks[i].mark_desc_col=== "undefined" || extras.marks[i].mark_desc_col=== null))
            mark[i].c_mark_desc_col = extras.marks[i].mark_desc_col;
        if(!(extras.marks[i].mark_col === "" || typeof extras.marks[i].mark_col=== "undefined" || extras.marks[i].mark_col=== null))
            mark[i].c_mark_col = extras.marks[i].mark_col;
        if(!(extras.marks[i].mark_col_image === "" || typeof extras.marks[i].mark_col_image=== "undefined" || extras.marks[i].mark_col_image=== null))
            mark[i].c_mark_col_image = extras.marks[i].mark_col_image;
        if(!(extras.marks[i].mark_action === "" || typeof extras.marks[i].mark_action=== "undefined" || extras.marks[i].mark_action=== null))
            mark[i].c_mark_action = extras.marks[i].mark_action;
        if(!(extras.marks[i].mark_origin === "" || typeof extras.marks[i].mark_origin=== "undefined" || extras.marks[i].mark_origin=== null))
            mark[i].c_mark_origin = extras.marks[i].mark_origin;
        if(!(extras.marks[i].mark_col_valor === "" || typeof extras.marks[i].mark_col_valor=== "undefined" || extras.marks[i].mark_col_valor=== null))
            mark[i].c_mark_col_valor = extras.marks[i].mark_col_valor;
        if(!(extras.marks[i].mark_style === "" || typeof extras.marks[i].mark_style=== "undefined" || extras.marks[i].mark_style=== null))
            mark[i].c_mark_style = extras.marks[i].mark_style;
    }
    alert("outside of 'for' posição 0 antes " + extras.marks[0].mark_col + "  depois " + mark[0].c_mark_col);
    alert("outside of 'for' posição 1 antes " +extras.marks[1].mark_col + "  depois " + mark[1].c_mark_col);
}

Answer 1

That because using:

mark[i] = x_mark;

you are referencing x_mark variable in the array not copying/cloning it as a model, so each change reference the original object x_mark .

Try to clone it instead using:

mark[i]=JSON.parse(JSON.stringify(x_mark));

Related: How do I correctly clone a JavaScript object?

Answer 2

The problem is with your line mark[i] = x_mark; . You think that makes a copy of the array, but it doesn't. It just sets mark[i] to point to an existing array, and when you change it all variables that point to it will see that change.

Try this example to see what I mean:

var arr = [];
var dflt = [ "abc" ];
arr[0] = dflt;
arr[1] = dflt;
document.write("<br>"+arr[0][0]);  
document.write("<br>"+arr[1][0]);
arr[0][0] = "changed";             // only arr[0] is modified, but arr[1] is too
document.write("<br>"+arr[0][0]);  // shows "changed" as expected
document.write("<br>"+arr[1][0]);  // also shows "changed" instead of "abc"