title: GroupBy in JavaScript to group JSON data and populate on optgroup
body: <p>I am a little bit lost.
  I am getting this JSON:</p>
  
  <pre><code>[{
      "id": "210",
      "name": "Name 1",
      "category": "Category 1"
  }, {
      "id": "187",
      "name": "Name 2",
      "category": "Category 1"
  }, {
      "id": "186",
      "name": "Name 3",
      "category": "Category 1"
  }, {
      "id": "185",
      "name": "Name 4",
      "category": "Category 1"
  }, {
      "id": "184",
      "name": "Name 5",
      "category": "Category 1"
  }, {
      "id": "183",
      "name": "Name 6",
      "category": "Category 1"
  }, {
      "id": "182",
      "name": "Name 7",
      "category": "Category 1"
  }, {
      "id": "181",
      "name": "Name 8",
      "category": "Category 2"
  }, {
      "id": "180",
      "name": "Name 9",
      "category": "Category 3"
  }, {
      "id": "178",
      "name": "Name 10",
      "category": "Category 2"
  }]
  </code></pre>
  
  <p>And I would like to put all of this in a select with options and optgroups. Actually the optgroup should be category</p>
  
  <p>I would like something like this:</p>
  
  <pre><code>&lt;select name="products" class="product" id="product"&gt;
  &lt;optgroup label="Category 1"&gt;
      &lt;option value="210"&gt;Name 1&lt;/option&gt;
      &lt;option value="187"&gt;Name 2&lt;/option&gt;
      &lt;option value="186"&gt;Name 3&lt;/option&gt;
      &lt;option value="185"&gt;Name 4&lt;/option&gt;
      ...
  &lt;/optgroup&gt;
  &lt;optgroup label="Category 2"&gt;
      &lt;option value="181"&gt;Name 8&lt;/option&gt;
      &lt;option value="178"&gt;Name 10&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Category 3"&gt;
      &lt;option value="180"&gt;Name 9&lt;/option&gt;
  &lt;/optgroup&gt;
  </code></pre>
  
  <p></p>
  
  <p>Today I have only made this because I'm struggling too much:</p>
  
  <pre><code>$(document).ready(function () {
      $.getJSON("5.php", {
          val: $(this).val()
      }, function (data) {
          $.each(data, function (i, item) {
              $("&lt;option/&gt;").attr("value", item.id).append(item.name).appendTo("optgroup");
          });
      });
  });
  </code></pre>
  
  <p>As you can see no optgroup :)
  Is there a way to do this?
  I can also modify my JSON if it can make it easier.</p>
  
  <p>Thanks for any help.</p>