Randomly calling an object property

Question

I have an object that looks like:

var monsters = {
    zombies:  {
        name: "zombie",
        hitPoints: 10,
        loot: "magic knife"
    },
    skeleton: {
        name: "skeleton",
        hitPoints: 15,
        loot: "magic shield"
    },
    ghoul:  {
        name: "ghoul",
        hitPoints: 12,
        loot: "magic helm"
    }
};  

I'm trying to set a function that will randomly select one of the properties in the variable. (zombies, skeleton, ghoul)

Here's what I have:

var travel = function(direction) {
        var newRoom = rooms[currentRoom.paths[direction]];
        if (!newRoom) {
            $("<p>You can't go that way.</p>").properDisplay();
        }
        else {
            currentRoom = newRoom;
            $("<p>You are now in the " + currentRoom.name + " Room.</p>").properDisplay();
                if (currentRoom.hasMonsters) {
                    function pickRand(monsters) {
                        var result;
                        var count = 0;
                        for (var prop in monsters)
                            if (Math.random() < 1/++count)
                                result = prop;
                            return $("<p>Holy Crap!  There's a" + result + "in here!</p>").properDisplay(); 

                    }
        }
        else {
            $("<p>Whew!  Nothing here.</p>").properDisplay();
        }
        }
    };

Note: The hasMonsters is in a separate object. It determines if a specific room has a monster or not.

How can I randomly select one of the monsters and insert in the output? I'm guessing I'm calling the object incorrectly and that's why it's not working.

Answer 1

Will something like this work? You can keep your monsters as an object and use Object.keys to fetch your keys (in this case your monsters) as an array. Then it's just a matter of plucking out a random monster with Math.random:

// so you have some object where the keys are your monsters
var monsters = { ghost: '..', skeleton: '..', donald_trump: '..'};

// grab your monsters above as an array
var monsterArray = Object.keys(monsters);

// pick your monster at random
var randomKey = Math.floor(Math.random() * monsterArray.length);

console.log('holy crap we found a ' + monsterArray[randomKey]);

Answer 2

now I see what you're asking. I want the name property called. Right now it will properly call what I'm guessing is the entire object. How do i call the name only?

Try using Object.keys()

var monsters = {
    zombies:  {
        name: "zombie",
        hitPoints: 10,
        loot: "magic knife"
    },
    skeleton: {
        name: "skeleton",
        hitPoints: 15,
        loot: "magic shield"
    },
    ghoul:  {
        name: "ghoul",
        hitPoints: 12,
        loot: "magic helm"
    }
};  

document.body.onclick = function() {
  
  var keys = Object.keys(monsters);
  var rand = Math.floor(Math.random() * keys.length)
  var res = monsters[keys[rand]];
  var key = Object.keys(res);
  var prop = res[key[Math.floor(Math.random() * key.length)]];
  console.log(res, prop);
  this.innerHTML += "<br>" + JSON.stringify(prop) + "<br>"
  
}

click