How to compare input Value with Array Name in Javascript

Question

I'm looking at creating a theme Randomizer by having menu dropdowns of categories. Each category has an associated array of items. For example, I've got an array full of mammals, and if a user chooses Mammal from the drop-down, they get a random mammal from the mammal array.

I can do it with a bunch of if statements, checking if a value is mammal, use the mammal array. The problem is there will be a lot of categories/arrays. So I'm trying to find a way to get the value, and then grab the array with the same name.

Here is the working code just using if statements:

<form class="firstItem">
        <select name="firstName" id="firstName">
            <option value="animals">---Animals---</option>
            <option value="mammals">Mammals</option>
            <option value="insects">Insects</option>
            <option value="birds">Birds</option>
            <option value="reptiles">Reptiles</option>
            <option value="fish">Fish/Aquatic</option>
            <option value="prehistoric">Prehistoric</option>
        </select>
    </form>
    <button class="button" id="submitBtn" onclick="submit()">Submit</button>

    <div class="results">
        <p id="resultsp"></p>
    </div>

<script>
    var mammals = ["Cow", "Horse", "Pig", "Donkey", "Elephant"];

    var insects = ["Weevil", "Hercules Beetle", "Ladybug", "Tarantula", "Moth"];

    function submit() {
        var firstName = document.getElementById("firstName");
        var firstTemp = firstName.value;
        var whatVar;

        if (firstTemp == "mammals") {
            whatVar = mammals.slice(0);
        } else if (firstTemp == "insects") {
            whatVar = insects.slice(0);
        } 
        random_items(whatVar);

        var resultsp = document.getElementById("resultsp");
        resultsp.innerText = random_items(whatVar);

        function random_items(firstName)
        {
            return whatVar[Math.floor(Math.random()*whatVar.length)];
        }
    }
</script>

I'd like to replace all the if statements with something that says whatever the value of firstName is, grab that variable.

I've tried replacing all the if statements with:

var whatVar = firstTemp;

but as firstTemp is a value, it treats it like a String, so if mammals is chosen it'll spit out one letter of the word mammals, rather than an item from the mammals array.

Am I going about this in a completely wrong way?

why not just `const dictionnary = { "mammals" : ["Cow", "Horse", "Pig", "Donkey", "Elephant"], "insects":["Weevil", "Hercules Beetle", "Ladybug", "Tarantula", "Moth"]}; const whatVar = dictionnary[firstTemp];` ? — Julien Barrois, Jun 11 '19 at 15:46
That totally works, thanks so much for your help, Julien, I appreciate it! — Tyler B, Jun 11 '19 at 16:15
by the way, you've got a type in your `random_items` function as the input paremeter is not used at all. It works because the function is defined whithin `submit`and captures the variable `whatVar` — Julien Barrois, Jun 11 '19 at 16:53
See the linked answer and https://stackoverflow.com/questions/10953303/javascript-interpret-string-as-object-reference/10953396#10953396 that this is a dupe of. Julien's suggestion is the right thing. The smallest change would have been to use `window[whatVar]` — Ruan Mendes, Jun 11 '19 at 17:59
Thank you both Julien and Juan. I didn't notice the original question when I was looking, thanks for marking as duplicated. I'm fairly new to stackoverflow, should I just delete the question? — Tyler B, Jun 12 '19 at 17:20

score 0 · Answer 1 · answered Jun 11 '19 at 16:49

try this for what you want to do. it's easy by the eval() function. I think its work for you!

<form class="firstItem">
      <select name="firstName" id="firstName">
        <option value="animals">---Animals---</option>
        <option value="mammals">Mammals</option>
        <option value="insects">Insects</option>
        <option value="birds">Birds</option>
        <option value="reptiles">Reptiles</option>
        <option value="fish">Fish/Aquatic</option>
        <option value="prehistoric">Prehistoric</option>
      </select>
    </form>
    <button class="button" id="submitBtn" onclick="submit()">Submit</button>

    <div class="results">
      <p id="resultsp"></p>
    </div>

    <script>
      var mammals = ["Cow", "Horse", "Pig", "Donkey", "Elephant"];

      var insects = ["Weevil", "Hercules Beetle", "Ladybug", "Tarantula", "Moth"];

      function submit() {
        var firstName = document.getElementById("firstName");
        var firstTemp = firstName.value;
        var whatVar = eval(firstTemp).slice(0);

        random_items(whatVar);

        var resultsp = document.getElementById("resultsp");
        resultsp.innerText = random_items(whatVar);

        function random_items(firstName) {
          return firstName[Math.floor(Math.random() * whatVar.length)];
        }
      }
</script>

Only you have to add this line where ever you want to convert string to a variable

eval(firstTemp).slice(0);

`eval` is usually avoided when there's a simple workaround. In this case, a `window[whatVar]` would have worked. See https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea — Ruan Mendes, Jun 11 '19 at 17:55

How to compare input Value with Array Name in Javascript

1 Answers1