Question

I have an object called apples and if i do something like apples[0].weight it returns a value. Now I want to be able to store an array of apples. Lets call the array myApples. How do I add multiple instances of apples to the myApples array without the values changing to the most updated one. For example:

apples[0].weight = 10;
apples[1].weight = 20;
myApples.push(apples);
apples[0].weight = 15;
apples[1].weight = 16;
myApples.push(apples);

Now if I were to print the value myApples[0].apples[0].weight i get 15 instead of getting 10. I think its because the reference is the same array, so it gets updated every time I change it. How would I go about storing these apple “states” so I can keep a history of changes made to it. Keep in mind I want to make this arbitrary, so I wouldnt have to make something like apples1, apples2, apples3, because the changes on this could be unlimited.(In my actual project I am storing pinpoints on a canvas, so i can basically do an “undo” and “redo” feature and want to store the values of these pinpoints every time something changes on the canvas.)

EDIT-
This is how I make apples or pinpoints:

var options = {pinpoints: [ { "top": 50,
                           "left": 280,
                           "width": 200,
                           "height": 200},
                         { "top": 0,
                           "left": 0,
                           "width": 300,
                           "height": 74 } ]}    
var optionConfig = $.extend({}, $.fn.mapImage.defaults, options);
var myPinpoints = optionConfig.pinpoints;

So if i do myPinpoints[0].left it gives me 280, I want to be able to push myPinpoints into an array then change myPinpoints[0].left to something else, and then push it on to the array again and save BOTH values

Answer 1

You can use jQuery.clone kind of API to clone the Object and move it to your Stack or Queue.
This way you can ensure object states are maintained separately.