Storing tree data in Javascript
<p>I need to store data to represent this:</p>

<p>Water + Fire  = Steam<br>
Water + Earth = Mud<br>
Mud   + Fire  = Rock  </p>

<p>The goal is the following: I have draggable HTML divs, and when <code>&lt;div id="Fire"&gt;</code> and <code>&lt;div id="Mud"&gt;</code> overlap, I add <code>&lt;div id="Rock"&gt;</code> to the screen. Ever played Alchemy on iPhone or Android? Same stuff</p>

<p>Right now, the way I'm doing this is a JS object :</p>

<pre class="lang-js prettyprint-override"><code>var stuff = {
    'Steam' : { needs: [ 'Water', 'Fire'] },
    'Mud'   : { needs: [ 'Water', 'Earth'] },
    'Rock'  : { needs: [ 'Mud',   'Fire'] },
    // etc...
};
</code></pre>

<p>and every time a div overlaps with another one, I traverse the object keys and check the 'needs' array.</p>

<p>I can deal with that structure but I was wondering if I could do any better?</p>

<p><strong>Edit</strong>: I should add that I also need to store a few other things, like a short description or an icon name. So typicall I have <code>Steam: { needs: [ array ], desc: "short desc", icon:"steam.png"},</code></p>

<p><strong>Final edit</strong>: thank you everyone for contributing, I found really valuable input in all your comments</p>
