Creating dynamic objects with Javascript
<p>I'm trying to create a new Javascript object from attributes pulled from the DOM using jQuery.
The info I'm trying to pull is the data-* from this:</p>

<pre><code>    &lt;button type='button' class='pickup' data-name="apple" data-weight='1' data-color='red'&gt;food&lt;/button&gt;
</code></pre>

<p>So I want to get data-name and data-weight and put them into a new (or existing if I have to) object. Here's where I'm having problems. I want the object to look like this:</p>

<pre><code>    MyObject = {
                food:  {
                        weight: 1,
                        color: 'red'
                       }
                }
</code></pre>

<p>I've been trying to create a new object like this through a "for(var i in MyObject)" loop, but when it comes down to adding the attributes and values to MyObject{} I can't figure out how to make it work.</p>

<p>Any ideas or suggestions?</p>

<hr>

<p>The answers below worked perfectly! Thank you!
How if I wanted to dynamically create:</p>

<pre><code>    MyObject.food = {} 
</code></pre>

<p>from a variable, like this:</p>

<pre><code>    var Name = "meal";
    MyObject.Name = {} // creates MyObject.meal = {};
</code></pre>

<p>How would I do that? I thought MyObject[Name] = {} would work but it didnt seem to for me. Maybe I typed it wrong? :S</p>
