search within an array in javascript

Question

I've been trying for a while now to search within an array, I've looked at all the other questions that even somewhat resemble mine and nothing works, so I'm asking for any help you can give now..

I have an array with a more complex insides than a simple string array

    var elementDefns = [
    {"element":"water", "combos": {"air":"steam", "earth":"sand"} },
    {"element":"fire", "combos": {"earth":"lava", "air":"energy"} },
    {"element":"air", "combos": {"water":"steam", "earth":"dust"} },
    {"element":"earth", "combos": {"water":"swamp", "fire":"lava"} },
];

Two elements are picked (by the users) which are combined to create new elements. I'd like to search through the elements for any combos that can be made. Ideally, I'd want to use Array.prototype.find, although I can't figure out how to use polyfills correctly and i'm unsure if i'm writing it correctly, so it continues to not work

    var elementOne = $("#board img:first-child").attr('id'); 
    var elementTwo = $("#board img:last-child").attr('id');

    function findElement(element) { 
        return elementDefns.element === elementOne;
    }

board is the id div where the element cards go to once clicked. I also tried a loop

    for (var i=0,  tot=elementDefns.length; i < tot; i++) {
            var indexHelp = elementDefns[i].element;
            var find = indexHelp.search(elementOne);
            console.log(find);
        }

I'm trying to post a question that's not too long, but I'm sure there's lots more about my code i need to adjust in order to do this. I guess I'm just asking if there's something obvious you think i could work on. I've looked at most of the answers on this site to similar problems but its all just going horribly wrong so any other support would be greatly appreciated..

Answer 1

I have an array with a more complex insides than a simple string array

Yes, but why? Get rid of the extra layers and this is trivial

var e1 = "water";
var e2 = "air";

var elementDefns = {
    "water": {"combos": {"air":"steam", "earth":"sand"} },
    "fire":  {"combos": {"earth":"lava", "air":"energy"} },
    "air":   {"combos": {"water":"steam", "earth":"dust"} },
    "earth": {"combos": {"water":"swamp", "fire":"lava"} },
};

elementDefns[e1].combos[e2] = > "steam"

Answer 2

If you want to keep your data-structure, you can filter through it like this:

  var matches = elementDefns
      .filter(e => e.element == first && e.combos[second] !== null)
      .map(e => e.combos[second]);

The first row filters out all matches, and the secon maps it over to the actual match-string (element name). The find() you speak of just returns the first value that matches, and i guess you want all , so that would be the filter() method.