Javascript associative array: pushing an object rewrites other array elements

Question

I have an Object that describes my document. Each document contains layers, that described in Objects in an array

var example = {
    id: 'some_id',
    layers: [{
        id: 'some_layer_id',
        width: 100,
        height: 200
    }]
};

There are different types of layers, each has it's template:

var layer_templates = [{
    type: 'text',
    width: 100,
    height: 100,
    style: 'common'
}];

I create new layers in jQuery event:

jQuery('#button').on('click', function () {
    var ldata = layer_templates[0]; // get a template
    ldata['id'] = 's-l-' + Math.random().toString(); // create an id
    example['layers'].push(ldata); // add new "layer" to document
    console.log(example['layers']); // check
});

Every time i add new ldata layer to example['layers'] array, it keeps only initial object with id: 'some_layer_id'and rewrites all newly created objects with the last one.

Please check jsFiddle:Problem in action

It is a console issue and setting the same id. log `console.log(ldata.id);` or `JSON.stringify(ldata);` — epascarello, Nov 07 '14 at 20:47
http://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays — epascarello, Nov 07 '14 at 20:48
the same thing happens in IE. The main problem is that I try to update a bigger array, and it updates it with objects of same ids(( — AlexNasonov, Nov 07 '14 at 20:50
All the consoles do it...Did you log just the id? Does it dupe? — epascarello, Nov 07 '14 at 20:51
Because the console lazy loads arrays/objects. They are NOT a 100% accurate snapshot at that exact moment in time. — epascarello, Nov 07 '14 at 20:54
It's not a console problem, cause whole script works as follows: i create a object with id, add it to array, then script creates DOM elements with pre-set id. So the main concern is that it creates DOM elements with the same ids. — AlexNasonov, Nov 07 '14 at 20:58
Maybe you should post http://stackoverflow.com/help/mcve that actually shows the issue. — epascarello, Nov 07 '14 at 21:01
Made a jsfiddle: http://jsfiddle.net/alexnasonov/0k70jgm4/9/ — AlexNasonov, Nov 07 '14 at 21:49

score 1 · Accepted Answer · answered Nov 07 '14 at 22:32

The problem is that you are not duplicating your template. You are using and re-using the SAME template among all your layers

var ldata = layer_templates[0];
ldata['id'] = 's-l-' + Math.random().toString(); // create an id

in actuality, ldata is just a pointer that is referencing the template, adding the id value to it only modifies your template so it looks like this now:

var layer_templates = [{
    type: 'text',
    width: 100,
    height: 100,
    style: 'common',
    id: 's-l-0.08636776800267398'
}];

NEXT time you try to add ANOTHER layer, you do the same thing yet again, which only pulls and changes the template once again... in the end, EVERY layer references the same template and therefore is the exact same data.

To fix this, you need to COPY your template, one way to do this is using JSON:

var ldata = JSON.parse(JSON.stringify(layer_templates[0]));

This method creates an entirely new ldata object that is a copy of the template.

Thank you! I thought that I don't have to create new copies as I change id each time... — AlexNasonov, Nov 07 '14 at 22:40

Javascript associative array: pushing an object rewrites other array elements

1 Answers1