How to console log object data in javascript?-CodePudding

I'm having some trouble returning the properties of my object. I keep getting an undefined error when I run the following code. I'm trying to reference what the rank is for each individual card. I thought the best way would be for them to each have their own object. However, when I console log I cant seem to get the properties out. Any advice?

The first console.log I need to return the rank #.

    //Deck with ranks
   var arrClubs = [
    {"img": '2_of_clubs.png',"rank": 1},{"img": '3_of_clubs.png',"rank": 2},{"img": '4_of_clubs.png',"rank": 3},{"img": '5_of_clubs.png',"rank": 4},{"img": '6_of_clubs.png',"rank": 5},{"img": '7_of_clubs.png',"rank": 6},{"img": '8_of_clubs.png',"rank": 7},{"img": '9_of_clubs.png',"rank": 8},{"img": '10_of_clubs.png',"rank": 9},{"img": 'jack_of_clubs.png',"rank": 10},{"img": 'queen_of_clubs.png',"rank": 11},{"img": 'king_of_clubs.png',"rank": 12},{"img": 'ace_of_clubs.png',"rank": 13},
 
   ]
     var suitType = Math.ceil(Math.random() * 1)
       var card = Math.floor(Math.random() * 12)
           var selectedCard //storing selected card
           
      if (suitType == "1"){   //Clubs
          
           console.log(JSON.stringify([arrClubs[rank]]))
           //selectedCard = arrClubs[card]
   
       }else if(suitType == "2"){ //Diamonds

          // console.log(arrDiamonds[card])
           //selectedCard = arrDiamonds[card]
   
       } else if (suitType == "3"){ //Hearts
   
          // console.log(arrHearts[card])
           //selectedCard = arrHearts[card]
        
       } else { //Spades
          
          // console.log(arrSpades[card])
          // selectedCard = arrSpades[card]
        
       }
              document.getElementById('p1Card').src = "./images/cards/"   selectedCard

 <img src="./images/cards/black_joker.png" height="300px" id="p1Card">
    <img src="./images/cards/red_joker.png" height="300px" id="p2Card">

CodePudding user response：

Here you can try this logic :

var arrClubs = [
    {"img": '2_of_clubs.png',"rank": 1},{"img": '3_of_clubs.png',"rank": 2},
 ];
 
 console.log(arrClubs[0].rank)

CodePudding user response：

There's no need to stringify the array, you can simply log it:

var arrClubs = [
    {"img": '2_of_clubs.png',"rank": 1},{"img": '3_of_clubs.png',"rank": 2},{"img": '4_of_clubs.png',"rank": 3},{"img": '5_of_clubs.png',"rank": 4},{"img": '6_of_clubs.png',"rank": 5},{"img": '7_of_clubs.png',"rank": 6},{"img": '8_of_clubs.png',"rank": 7},{"img": '9_of_clubs.png',"rank": 8},{"img": '10_of_clubs.png',"rank": 9},{"img": 'jack_of_clubs.png',"rank": 10},{"img": 'queen_of_clubs.png',"rank": 11},{"img": 'king_of_clubs.png',"rank": 12},{"img": 'ace_of_clubs.png',"rank": 13}
]

console.log(arrClubs)

Or better yet, throw it into a table:

console.table(arrClubs)

CodePudding user response：

It's not necessary to use JSON.stringify for console logs.

If you want to log the whole array, use: console.log(arrClubs).

To only log the first rank value: console.log(arrClubs[0].rank).

To log all ranks, you could create an array with those values with like this:

const ranks = arrClubs.map(item => item.rank);
console.log(ranks);