title: Group by array and add field and sub array in main array
body: <p>I have a heavy array like this:</p>
  
  <pre><code>[
    {Id: 1, Name: 'Red', optionName: 'Color'}, 
    {Id: 2, Name: 'Yellow', optionName: 'Color'},
    {Id: 3, Name: 'Blue', optionName: 'Color'},
    {Id: 4, Name: 'Green', optionName: 'Color'},
    {Id: 7, Name: 'Black', optionName: 'Color'},
    {Id: 8, Name: 'S', optionName: 'Size'},
    {Id: 11, Name: 'M', optionName: 'Size'},
    {Id: 12, Name: 'L', optionName: 'Size'},
    {Id: 13, Name: 'XL', optionName: 'Size'},
    {Id: 14, Name: 'XXL', optionName: 'Size'}
  ]
  </code></pre>
  
  <p>What I need to do is to group them by <code>optionName</code> and have two row in the main array like this:</p>
  
  <pre><code>[
    {
      Name: 'Color',
      Data:[{Id: 1, Name: 'Red'},
            {Id: 2, Name: 'Yellow'},
            {Id: 3, Name: 'Blue'},
            {Id: 4, Name: 'Green'},
            {Id: 7, Name: 'Black'}]
    }, {
      Name: 'Size',
      Data:[{Id: 8, Name: 'S'},
            {Id: 11, Name: 'M'},
            {Id: 12, Name: 'L'},
            {Id: 13, Name: 'XL'},
            {Id: 14, Name: 'XXL'}]
    }
  ]
  </code></pre>
  
  <p>How to do it in javascript?</p>