How do I store an array of objects?

I have an object image I can do things like image.top and it will return a value, or I can do image.myPoints[0].left and it will return a value. I basically have this image object that stores values for me. I want to be able to put multiple image objects in an array so i could do something like this:

$("#toPinpoint").mapImage({
                useAjax: false,
                pinpoints: [ { "top": 50,
                           "left": 280,
                           "width": 200,
                           "height": 200},
                         { "top": 0,
                           "left": 0,
                           "width": 300,
                           "height": 74 } ] 
            });

I use this function to create the object, the pinpoints get added on to the object. When the mapImage function is called this is what happens:

    $.开发者_如何学JAVAfn.mapImage = function(options){



    //Set user input options and defaults
    var optionConfig = $.extend({}, $.fn.mapImage.defaults, options);

    image=this;
    this.image = this;

    // Assign defaults
    this.previewMode = optionConfig.previewMode;
    this.pinpoints = optionConfig.pinpoints;
    image.pinpoints = optionConfig.pinpoints;
    image.pinpointCount = 0;
    image.selected = 0;
    ...}

This sets the image properties and now I want to modify the properities with my application then SAVE these image objects into an array.

My problem with this is that the array is loading up with image objects, but it seems to fill the whole array with the object i just pushed in, so it doesnt save my old image objects. For example, if i do myArray[0].myPoints[0].left , lets say it retruns 30, and then i push another image object that has myPoints[0].left equal to 20, the first image object I have in the array turns into 20 instead of saving it as 30. If theres a good way of solving this issue it would be greatly appreciated. Thank you!

Using array.push(x) should add x to the end of array. However, it will not create a copy of x, so if you then change an attribute of x and push() it again, your array will contain two instances of x with the updated attribute - I suspect this is what you are seeing. (That is, you may be changing the top property of your image and push()ing it again, instead of creating a whole new image to push()).

var myArray = new Array();

You need to use the "new" keyword.

I think you're making this more complicated than need be.

(function($){
  $.fn.mapImage = function(options) {
    var defaults = { /* your defaults here */ };

    // Merge default options with passed in options and store
    options = ($.extend({}, defaults, options));

    // Do other stuff
  };
})(jQuery);

// Backup current pinpoints and modify the current one
$('#toPinpoints').data('pinpoints-backup', $('#toPinpoints').data('pinpoints').splice());
$('#toPinpoints').data('pinpoints')[0].top = 100;

// Push a new array of pinpoints
$('#toPinpoints').data('pinpoints').push({"top": 100, "left": 50, "width": 200, "height": 150});

Be careful with jQuery.extend() as it does not operate recursively, so any arrays that are within the defaults sub-array will be completely overwritten by those in the options array, not merged.

If you'll need to access the pinpoints data later, you may wish to use jQuery.data() by doing something like this.data($.extend({}, $.fn.mapImage.defaults, options)); instead of reassigning the options variable. The pinpoints for a given element could then be accessed anywhere by $('#toPinpoint').data('pinpoints') which will return the same array you passed in via options to mapImage(). You could then traverse all the pinpoints with jQuery.each().

If I'm missing something in what you're trying to do, please let me know.