Apples

• apples-fetch.html
• JSON data apples-pyo.php

The JavaScript:

let applesUrl = "https://cscie12.dce.harvard.edu/apples-pyo.php";
document.addEventListener('DOMContentLoaded',function(){
  fetch(applesUrl)
    .then(response => response.json())
    .then(data => buildApplesList(data));
});

function buildApplesList(data){
  let template = document.getElementById('apple-template').innerHTML ;
  console.log(template);
  let compiledTemplate = Handlebars.compile(template);
  let rendered = compiledTemplate(data);
  document.getElementById('applelist').innerHTML = rendered;
}

The template:

<template id="apple-template">
<h2>Picking Now</h2>
  <ul>
    {{#apples.picking_now}}
      <li>{{ . }}
    {{/apples.picking_now}}
  </ul>

  <h2>Picking Soon</h2>
  <ul>
    {{#apples.picking_soon}}
      <li>{{ . }}
    {{/apples.picking_soon}}
  </ul>
</template>