Access a nested object using a variable value in Javascript

Question

I am making a game. The end-user will select a fighter among 12 available fighters. Let's say they select 'Ryu'. But they could have selected 'ChunLi'. The player selection will be stored in the variable 'selectedPlayer'. Now I need to get/access the object (or its members) that matches the user's selection. I have tried a number ways, including the one shown below, but I get in the console: "Uncaught TypeError: Cannot read property 'Ryu' of undefined."

var selectedPlayer = "Ryu";
var Slogan = players[selectedPlayer]['Slogan'];
console.log(Slogan);

var players = {
    Ryu:  {
        Name: "Ryu",
        Country: "Japan",
        Text: "The answer lies in the heart of battle.",
        smImg: "../images/small/ryu.png",
        lgImg: "../images/large/ryu.jpg",
        attack: [1,5,10,15,20,25]
    },
    ChunLi: {
        Name: "Chun Li",
        Country: "China",
        Slogan: "Want to see my Kung-Fu? I'll show you.",
        smImg: "../images/small/chunli.png",
        lgImg: "../images/large/chunli.jpg",
        attack: [1,4,11,15,21,25]
    }
}

I need to be able to get into the 'players' object and access the members of the selected fighers' object. I could write a bunch of if statements, but that wouldn't be very clean. Can I do something like this?

var playerOne = {
    Name: players.<some variable>.Name,
    Country: players.<some variable>.Country,
    Slogan: players.<some variable>.Slogan,
    smImage: players.<some variable>.smImg,
    lgImage: players.<some variable>.lgImg,
    Attack: players.<some variable>.attack
};

var playerTwo = {
    Name: players.<some variable>.Name,
    Country: players.<some variable>.Country,
    Slogan: players.<some variable>.Slogan,
    smImage: players.<some variable>.smImg,
    lgImage: players.<some variable>.lgImg,
    Attack: players.<some variable>.attack
};

Maybe there is a different. I'm open to anything that works well. Thank you.

Answer 1

You need to define the mapping before you access it. Plus, Ryu appears to have no Slogan.

var players = {
    Ryu:  {
        Name: "Ryu",
        Country: "Japan",
        // Shoudldn't this be "Slogan"?
        Text: "The answer lies in the heart of battle.",
        smImg: "../images/small/ryu.png",
        lgImg: "../images/large/ryu.jpg",
        attack: [1,5,10,15,20,25]
    },
    ChunLi: {
        Name: "Chun Li",
        Country: "China",
        Slogan: "Want to see my Kung-Fu? I'll show you.",
        smImg: "../images/small/chunli.png",
        lgImg: "../images/large/chunli.jpg",
        attack: [1,4,11,15,21,25]
    }
}

var selectedPlayer = "Ryu";
var Slogan = players[selectedPlayer]['Slogan']; 
console.log(Slogan);

Answer 2

Your error is because you're referencing players before it's defined. Try this:

var players = {
    Ryu:  {
        Name: "Ryu",
        Country: "Japan",
        Text: "The answer lies in the heart of battle.",
        smImg: "../images/small/ryu.png",
        lgImg: "../images/large/ryu.jpg",
        attack: [1,5,10,15,20,25]
    },
    ChunLi: {
        Name: "Chun Li",
        Country: "China",
        Slogan: "Want to see my Kung-Fu? I'll show you.",
        smImg: "../images/small/chunli.png",
        lgImg: "../images/large/chunli.jpg",
        attack: [1,4,11,15,21,25]
    }
}

var selectedPlayer = "Ryu";
var Slogan = players[selectedPlayer]['Slogan'];
console.log(Slogan);