javascript - How do I store an array of objects? - Stack Overflow

admin管理员组

文章数量:1317909

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:

    $.fn.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!

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:

    $.fn.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!

• javascript
• jquery

Share Improve this question Follow edited Feb 16, 2011 at 6:23 anthonypliu asked Feb 16, 2011 at 5:40 anthonypliuanthonypliu 12.4k2828 gold badges9595 silver badges154154 bronze badges 3

• I can't seem to replicate this. Can you post a more detailed code example? When you say "pop" another image, do you mean push? Because they have the opposite result. – Andrew Marshall Commented Feb 16, 2011 at 5:50
• @Andrew Marshall: I meant push sorry, and yes I will put a more detailed example up – anthonypliu Commented Feb 16, 2011 at 5:53
• 1 Your anti-patterns are showing: image = this; this.image = this; Hi, I'm a circular reference! – ken Commented Feb 16, 2011 at 6:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 plicated 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 pletely 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.

本文标签： javascriptHow do I store an array of objectsStack Overflow