title: Javascript Populate select with json data in ES6 (without jquery)
body: <p>I have some data in json format that I would like to add to my select.</p>
  
  <p>Here is the data:</p>
  
  <pre><code> {
      "timezones": 
      {
          "country": "Africa",
          "tz": "Africa/Abidjan"
      },
      {
          "country": "America",
          "tz": "America/Anguilla"
      }
  }
  </code></pre>
  
  <p>Here is the current select:</p>
  
  <pre><code>&lt;select&gt;
  
      &lt;optgroup label="Africa"&gt;
          &lt;option value="Africa/Abidjan"&gt;Adak&lt;/option&gt;
      &lt;/optgroup&gt;
  
      &lt;optgroup label="America"&gt;
          &lt;option value="America/Adak"&gt;Anguilla&lt;/option&gt;
      &lt;/optgroup&gt;
  
  &lt;/select&gt;
  </code></pre>
  
  <p>How can I populate the select from the json data instead of hard coding it without jQuery ?</p>