title: How to create dynamically named JavaScript object properties?
body: <p>Here is what I have</p>
  
  <pre><code>&lt;form&gt;
    &lt;input type="text" name="item1" class="grab" value="userInput" /&gt;
    &lt;input type="text" name="somethingelse1" class="grab" value="differentUserInput" /&gt;
    ... (any number of inputs)
  &lt;/form&gt;
  </code></pre>
  
  <p>Using JQuery/Javascript I want to build an array of objects with name value pairs that looks like this:</p>
  
  <pre><code>output = [ {item1: userInput}, {somethingelse1: differentUserInput} ... etc.];
  </code></pre>
  
  <p>I have tried this with no success:</p>
  
  <pre><code>var output = new Array();
  $('.grab').each( function(index) { 
      output.push({$(this).attr('name'): $(this).val()} );
  });
  </code></pre>
  
  <p>I have tried several variations including experimenting with eval(), but to no avail.  If I remove the $(this).attr('name'), and give it a static name it works... so how can I create dynamically named objects?</p>