How to search through and find a object name in an array?

Question

I have a player object, which also has a array full of other object players as seen here:

 //player.characters is a list of characters available to select.
 //player.CC is registered as the games 'current character' being played.

   player.characters = [nullman, dwarf, human, elf, cloud, eren, erentitan, levi, mikasa];
   player.cc = player.characters[0];

These are the other objects that I can access for switching game characters during the selection screen. I wrote a function to create a player selection button. I want to design this button to have some built-in features so I don't have to repeat code on my start.init function. (After having 10 lines of the same code, I realized I needed to write a function to support ALL characters rather than for each individually).

This is the code I came up with, that will serve every selectable character.

function createPlayerButton(name, classID = "selection", delay, duration) {
        var button = document.createElement("button");
        button.textContent = name;
        button.setAttribute("id", name);
        button.setAttribute("class", classID);
        chatbox.appendChild(button);
        button.style.animationDelay = delay + "s";
        button.style.animationDuration = duration + "s";

        $("#"+name+"").hover(function(){
        postPlayerImage("images/players/"+name+".jpg", "animated fadeIn avatar", "0", "1"); 
        console.log(name);
        console.log(player.characters.indexOf(cloud));
        }); 



        dom.el(""+name+"").onclick = function(){
            player.cc = player.characters[1];
            listPlayerStats(dwarf);
            postPlayerImage("images/dwarf2.jpg", "animated fadeIn avatar", "1", "2"); 
            playerSelect();
        }

So I have a few things going on here. The first block of code pretty much creates the button on screen. The second block is a hover animation that will pop the character's avatar on screen. The third block is code that loads in stats and necessary images.

The issue I'm having is block-3: line-2 . Player.CC is what I use to define the current character being played. I use the player.characters index to switch between each player, but this data is hard-coded. I need a more robust system where it can find the objects I already have based on name, as seen in CreatePlayerbutton(name) argument.

If you look at block-2: line-4, I can manually type in a object's name and find the proper index, but again, this is hard coded. I tried using "name", but its stringified and does not register, therefor I get a -1 on index.

How can I use the "name" parameter in my function, to find objects in my player.characters array?

Note: I understand that in block-3: line-3 onward I have hard-coded dwarf data. I can and will fix this after figuring out how to set the object on line 2.

`player.cc = player.characters.find(function (p) { return p.name === name})` — Keith, Mar 18 '18 at 19:04
Possible duplicate: https://stackoverflow.com/questions/7364150/find-object-by-id-in-an-array-of-javascript-objects?rq=1 — kingdaro, Mar 18 '18 at 19:14

score 0 · Answer 1 · answered Mar 18 '18 at 19:19

You can create simply search your character array for a specific name.

Using .find():

let character = player.characters.find(c => c.name == name);

Or without:

let character;
for(c of player.character){
    if(c.name == name){
        character = c;
        break;
    }
}

If you don't want to search at all you can just store your characters in an object:

player.characters = {nullman: nullman, dwarf: dwarf, human: human, elf: elf, cloud: cloud, eren: eren, erentitan: erentitan, levi: levi, mikasa: mikasa};

and select them with

let character = player.characters[name];

How to search through and find a object name in an array?

1 Answers1