Giving an object property an array value?

Question

I have the following code and I want to make the deck array full of 52 different cards. Whenever I run the code and the card object is alerted it displays as '[object Object]'.

Can someone explain to me why it does this and a solution for this problem?

var suits = ["Clubs", "Diamonds", "Hearts", "Spades"];
var ranks = ["A", 2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K"];
var deck = []; 

for (var i = 0; i < suits.length; i++) {
    for (var j = 0; j < ranks.length; j++) {
        var card = {rank: ranks[j], suit: suits[i]};
        deck.push(card);
        alert(card)
    }
}

possible duplicate of [how to alert javascript object](http://stackoverflow.com/questions/3580754/how-to-alert-javascript-object) or [Print content of JavaScript object?](http://stackoverflow.com/questions/1625208/print-content-of-javascript-object) — Bergi, Jul 16 '13 at 19:31

Matthew Perron · Accepted Answer · 2013-07-16T20:28:16.247

Why it does this

This is perfectly normal. The card object you create doesn't know how to represent itself when you do your alert(), simply because there are no toString() method implementation.

Solution for your problem

Try specifying an anonymous toString() function implementation to each card object like this:

var suits = ["Clubs", "Diamonds", "Hearts", "Spades"];
var ranks = ["A", 2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K"];
var deck = []; 

for (var i = 0; i < suits.length; i++) {
    for (var j = 0; j < ranks.length; j++) {

        var card = {
                       rank: ranks[j], 
                       suit: suits[i],
                       toString : function() { return this.rank + ' ' + this.suit; }
                   };

        deck.push(card);

        //alert(card); // console.log doesn't block code execution
        console.log(card.toString());
    }
}

Note

You should consider using console.log() instead of alert() as it is much less annoying and easier to debug in console (hit F12). But be careful with production code running IE9 or lower as their javascript engine will crash when the developper console is not opened.

I'd either use `alert(card)` (explicitly `alert(card.toString())`) *or* `console.log(card)`, not a mix of them :-) — Bergi, Jul 16 '13 at 19:28
For sure, that's why I commented the `alert()` call in the example. ;) — Matthew Perron, Jul 16 '13 at 20:26
Thanks for that, I got a but confused with the console.log() and alert(), all working now. — Tim, Jul 16 '13 at 21:19

score 2 · Answer 2 · answered Jul 16 '13 at 19:07

This happens because you specify the entire object to alert, and alert does not know which properties are relevant. If you want an expandable view of your object, you can use console.log(card), this will output your object as a tree-view into the browser developer console.

score 0 · Answer 3 · answered Jul 16 '13 at 19:06

0

That is how an object is showed, its toString method outputs just that, to see its contents use

alert(JSON.stringify(card));

answered Jul 16 '13 at 19:06

Alberto Zaccagni

30,779
11
72
106

Disclaimer: JSON.stringify is great for debugging when you have a fairly new browser. A disappointing number of publically-used browsers don't support it though, so just be sure to have fallbacks, or remove that logging for production code. – Katana314 Jul 16 '13 at 19:09

HIRA THAKUR · Answer 4 · 2013-07-16T19:12:45.150

FIDDLE DEMO

Replace your alert with this-->alert(JSON.stringify(card))

var suits = ["Clubs", "Diamonds", "Hearts", "Spades"];
var ranks = ["A", 2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K"];
var deck = []; 

for (var i = 0; i < suits.length; i++) {
    for (var j = 0; j < ranks.length; j++) {
        var card = {rank: ranks[j], suit: suits[i]};
        deck.push(card);
       alert(JSON.stringify(card))//CHANGE THIS...
       console.log(JSON.stringify(card))
    }
}

EXPLANATION

JSON.stringify converts JavaScript data structures into JSON text.Json text is nothing but key:value pair of text.It cant get simpler.

score 0 · Answer 5 · answered Jul 16 '13 at 19:07

0

You should change your alert to this:

alert(JSON.stringify(card))

answered Jul 16 '13 at 19:07

jh314

27,144
16
62
82

Giving an object property an array value?

5 Answers5