title: Creating associative arrays in JavaScript
body: <p>Using the following code:</p>
  
  <pre><code>$credits.getCredits = function() {
      return $(this).find( 'tbody' ).children( 'tr' ).map(function(){
          var $name = $(this).children(':first').html();
          var $role = $(this).children(':nth-child(2)').html();
  
          return { $role: $name };
      }).get();
  }
  </code></pre>
  
  <p>Which looks through the elements of a credits list and <em>should</em> return a listing like the following:</p>
  
  <pre><code>[
       { 'Make-up': 'Bob' },
       { 'Make-up': 'Susan' },
       { 'Photography': 'Charlie' },
       { 'Lighting': 'Mike' },
       { 'Props': 'One-handed Tony' }
  ]
  </code></pre>
  
  <p>It ends up outputting this instead:</p>
  
  <pre><code>[
       { '$role': 'Bob' },
       { '$role': 'Susan' },
       { '$role': 'Charlie' },
       { '$role': 'Mike' },
       { '$role': 'One-handed Tony' }
  ]
  </code></pre>
  
  <p>How do you remedy the associative array creation to get the desired output?</p>