JavaScript Templates - Apple Picking

• JS Fiddle of Apple Picking Example

JSON Data

{
    "apples": {
        "picking_now": [
            "Macoun",
            "Empire",
            "Cortland",
            "McIntosh",
            "Honey Crisp",
            "Gala",
            "Red Delicious"
        ],
        "picking_soon": [
            "Golden Delicious",
            "Northern Spy",
            "Baldwin",
            "Mutsu"
        ],
        "picking_done": [
            "Ginger Gold",
            "Jonamac",
            "Gravenstein"
        ]
    }
}

Handlebars Template

<div id="appleslisttemplate" class="handlebars">
  <h3>Picking Now</h3>
  <ul>
    {{#apples.picking_now}}
      <li>{{.}}</li>
    {{/apples.picking_now}}
  </ul>
  <h3>Picking Soon</h3>
  <ul>
    {{#apples.picking_soon}}
      <li>{{.}}</li>
    {{/apples.picking_soon}}
  </ul>
  <h3>Missed Out for This Year</h3>
<ul>
    {{#apples.picking_done}}
    <li>{{.}}</li>
    {{/apples.picking_done}}
</ul>
</div>

JavaScript

let dataUrl = 'https://cdn.rawgit.com/dpheitmeyer/b9fe0838e27b28db1287/raw/38356d6675e355215b7bf22ff75c520a8fbe8850/apples.json'

$(document).ready(function(){
  $.getJSON(dataUrl,
    function (data) {
      var mysource = $('#appleslisttemplate').html();
      var mytemplate = Handlebars.compile(mysource);
      var myresult = mytemplate(data)
      $('#appleslist').html(myresult);
  });
})