JSFiddle - React, Tailwind, and code Playground

by jahrichie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<select id="voices">
<optgroup>Thing</optgroup>
<option>Whatever</option>
</select>

JavaScript

$(function(){

  var vs =  window.speechSynthesis.getVoices();
  var by_country = {}
  var countries  = []
  $.each(vs, function( i, voiceObj ) {
    var country = voiceObj["lang"].split("-")[1]
    countries.push(country)
    var name    = voiceObj["name"]
    var country_exists = (by_country[country] && by_country[country]["voices"].length >0)
    console.log(country_exists)
    if (country_exists) {
      by_country[country].voices.push(voiceObj)
    } else {
      by_country[country] = { voices: []}
      by_country[country]["voices"].push(voiceObj)
    }

  });


});