Array of objects in JS

Question

I am a JS newbi am trying to create an Array of objects. I have created the following object:

gameCard = new Object({
    image : "",
    container:"",
    match2Card:"",
    visible: false,
    cardId:"",

    updateCard: function (imageName,divName,matchingCard,isVisible,cardId) {
        this.image = imageName;
        this.container = divName;
        this.match2Card = matchingCard;
        this.visible = isVisible;
        this.cardId = cardId;
    },
    toggleCard: function (){
        if (this.visble) {
            this.visble = false;
        }
        else {
            this.visble = true;
        }
    },
    printCard : function() {
        document.write (this.image + ' ' + this.container + ' ' + this.match2Card + ' ' + this.visible + ' ' + this.cardId + '<br>') ;
        //alert (this.match2card);
    }
})

and run the following :

gameCards = new Array ();

for (i=0; i<20 ; i=i+1) {
    z=i+1;

    c1 = Math.floor((Math.random()*20)+1);

    gameCard.updateCard ( 'images/bf'+i+'.jpg' , 'div' + c1 , z , false,i) ;

    gameCards.push(gameCard);
}

when printing the array by using :

for (i=0;i<20; i++) {
    gameCards[i].printCard();
}

all items are the same.

what am I doing wrong ?

Use Object literal form {} instead of new Object() and same for Array [] instead of new Array() — Givi
– Givi, Commented Jun 7, 2013 at 12:21
You're only creating one card and then adding it to the array over and over. You need to create multiple card instances inside your loop. — Mike Samuel
– Mike Samuel, Commented Jun 7, 2013 at 12:23
@PointedEars Yes, you're right with for loop it's just creating 20 pointer for same object — Givi
– Givi, Commented Jun 7, 2013 at 12:25
@Givi Afterwards the array contains 20 references to the same object. — PointedEars
– PointedEars, Commented Jun 7, 2013 at 12:27

PointedEars · Accepted Answer · 2013-06-07 13:16:21Z

1

You are using only one object, you must use

gameCard = {…} in the loop. (new Object is not necessary)

for (var i = 0; i < 20; ++i) {
   var gameCard = {…}; // create a new instance of object
   …
}

edited Jun 7, 2013 at 13:16

PointedEars

15k4 gold badges36 silver badges33 bronze badges

answered Jun 7, 2013 at 12:23

Thierry

5,2533 gold badges27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

PointedEars Over a year ago

The Object constructor does not use its argument for initialization; it converts it into an object. Therefore the Object constructor is unnecessary here; the object initialiser {…} already creates an Object instance and evaluates to a reference to that instance.

Thierry Over a year ago

@PointedEars Yes, but the important is to create a new instance in the loop

djechlin Over a year ago

@PointedEars what? this answer looks right to me. If there's a further mistake the OP made, this answer covers the most important one.

PointedEars Over a year ago

@djechlin It looks right now. You are falsely assuming that I downvoted it.

djechlin Over a year ago

@PointedEars why does it look right now? The var decl didn't matter.

|

pete · Accepted Answer · 2013-06-07 18:09:39Z

Either define your GameCard object like so (fiddle):

var GameCard = function () { //wrap in a function to mimic a constructor
    return {
        "image": "",
        "container": "",
        "match2Card": "",
        "visible": false,
        "cardId": "",
        "updateCard": function (imageName, divName, matchingCard, isVisible, cardId) {
            this.image = imageName;
            this.container = divName;
            this.match2Card = matchingCard;
            this.visible = isVisible;
            this.cardId = cardId;
        },
        "toggleCard": function () {
            this.visible = !this.visible;
        },
        "printCard": function () {
            log(this.image + ' ' + this.container + ' ' + this.match2Card + ' ' + this.visible + ' ' + this.cardId + '<br>');
        }
    };
};

var test = function () {
    var gameCards = [],
        card = null,
        i = 0;
    for (i = 0; i < 20; i = i + 1) {
        // call the function to get a new object
        card = GameCard();
        // set object properties
        z = i + 1;
        c1 = Math.floor((Math.random() * 20) + 1);
        card.updateCard('images/bf' + i + '.jpg', 'div' + c1, z, false, i);
        // push into array
        gameCards.push(card);
    }
    for (i = 0; i < 20; i++) {
        gameCards[i].printCard();
    }
};
test();

or define it like this (fiddle):

var GameCard = function () { //or make a constructable object
    this.image = "";
    this.container = "";
    this.match2Card = "";
    this.visible = false;
    this.cardId = "";
    this.updateCard = function (imageName, divName, matchingCard, isVisible, cardId) {
        this.image = imageName;
        this.container = divName;
        this.match2Card = matchingCard;
        this.visible = isVisible;
        this.cardId = cardId;
    };
    this.toggleCard = function () {
        this.visible = !this.visible;
    };
    this.printCard = function () {
        log(this.image + ' ' + this.container + ' ' + this.match2Card + ' ' + this.visible + ' ' + this.cardId + '<br>');
    };
};

var test = function () {
    var gameCards = [],
        card = null,
        i = 0;
    for (i = 0; i < 20; i = i + 1) {
        // instantiate new object
        card = new GameCard();
        // set properties
        z = i + 1;
        c1 = Math.floor((Math.random() * 20) + 1);
        card.updateCard('images/bf' + i + '.jpg', 'div' + c1, z, false, i);
        // push into array
        gameCards.push(card);
    }
    for (i = 0; i < 20; i++) {
        gameCards[i].printCard();
    }
};
test();

Otherwise, what you're doing is pushing the same instance into the array 20 times.

UPDATE

You could also define your GameCard object as you're currently doing and then call Object.create(GameCard) to create a new instance of it (fiddle):

var GameCard = {
    "image": "",
    "container": "",
    "match2Card": "",
    "visible": false,
    "cardId": "",
    "updateCard": function (imageName, divName, matchingCard, isVisible, cardId) {
        this.image = imageName;
        this.container = divName;
        this.match2Card = matchingCard;
        this.visible = isVisible;
        this.cardId = cardId;
    },
    "toggleCard": function () {
        this.visible = !this.visible;
    },
    "printCard": function () {
        log(this.image + ' ' + this.container + ' ' + this.match2Card + ' ' + this.visible + ' ' + this.cardId + '<br>');
    };

var test = function () {
    var gameCards = [],
        card = null,
        i = 0;
    for (i = 0; i < 20; i = i + 1) {
        // use Object.create for a constructor
        card = Object.create(GameCard);
        // set properties
        z = i + 1;
        c1 = Math.floor((Math.random() * 20) + 1);
        card.updateCard('images/bf' + i + '.jpg', 'div' + c1, z, false, i);
        // push into array
        gameCards.push(card);
    }
    for (i = 0; i < 20; i++) {
        gameCards[i].printCard();
    }
};
test();

Using a function as constructor that does not have prototype methods or properties to return an object is needlessly complicated, except when you use closures (have “private properties” in the constructor).
thx you all for you help am going to check what you suggested and will update if I was able to solve this issue.
am still getting the same result :( I wanted create an Array that will include 20 items of the object gameCard (should have beed 20 different item and sill getting the same items 20 items. I have tried to use gamesCards[i] = new object (gameCard); but it did not help
@user2463457: I minimized the code needed for the answer. Check out the included (and working) jsFiddles and compare those with your code.
when running the updated fiddle am getting the same issue that am currently handling all the Items in the Array are having the same value.

Collectives™ on Stack Overflow

Array of objects in JS

2 Answers 2

15 Comments

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

8 Comments

Related