How to separate items rendered from .getJSON by category prop
<p>I've got a menu of coffee, for example, each with it's own <code>parentCategory</code> and I want to render them on the page like so but I'm not entirely sure where to start:</p>

<ul>
<li><p>category title</p>

<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul></li>
<li><p>category title</p>

<ul>
<li>item</li>
<li>item</li>
</ul></li>
</ul>

<p>My data model looks like this: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>{ "menuItems": [
 {
    "index": 0,
    "parentCategory": "Americanos", 
    "calories": 234,
    "name": "Caffè Americano",
    "photos": {
      "squareThumb": "http://www.starbucks.com/assets/67c30b9dacd4406db797b1690ac22475.jpg"
    }
  }, {
    "index": 0,
    "parentCategory": "Lattes", 
    "calories": 234,
    "name": "Caffè Latte",
    "photos": {
      "squareThumb": "http://www.starbucks.com/assets/aee68ca3048142f38741f20b30b7a581.jpg"
    }
  }, {
    "index": 0,
    "parentCategory": "Mochas", 
    "calories": 234,
    "name": "Caffè Mocha",
    "photos": {
      "squareThumb": "http://www.starbucks.com/assets/bc15a5ca9d744b66bda07254f2f50013.jpg"
    }
  }...</code></pre>
</div>
</div>
</p>

<p>and my current script looks like so: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$.getJSON('menu.json', function(drinks) {
  var getMenuItem  = drinks.menuItems;
  var sortedArray = getMenuItem.sort(function(a,b){
    return a.parentCategory &gt; b.parentCategory ?1 :-1
  })
  var output = "";
  for (var i in sortedArray) {
      output += "&lt;div class='menuItem'&gt;&lt;p&gt;" + drinks.menuItems[i].name + "&lt;/p&gt;&lt;img src='" + drinks.menuItems[i].photos.squareThumb + "'/&gt;&lt;/div&gt;";
  }
  document.getElementById("demo").innerHTML=output;
});</code></pre>
</div>
</div>
</p>