Getting the values from a JSON

Question

each entry in the JSON, looks like this:

{
  "ALBA": [
    {
      "name": "ABRUD",
      "zip": "515100",
      "lat": "46.274675",
      "long": "23.065029"
    },
    {
      "name": "ABRUD-SAT",
      "zip": "515101",
      "lat": "46.283967",
      "long": "23.061093"
    },
}

The first object is the county name, I have more of them, but I just gave an example, the nested objects are the cities. What I want is a way to display them in a select tag in HTML, but I can't manage to do it.

I have the following code, until now:

const getCities = () => {
    // Object.keys(regions).map(function(key, index) {
    //   console.log(regions[key]);
    // })
    for (const region in regions) {
      console.log(region); //this returns exactly what i want
    //cities.push(region)
    }
  }
  getCities();

And in html:

<div>
            <select name="city">
              <option value={cities}>{cities}</option>
            </select>
</div>

How can I make this select tag return me exactly the counties and how to make another one to show me the cities name based on the selected county?

EDIT: I managed to do it doing the following:

const getCities = () => {
    for (const region in regions) {
      cities.push(region);
    }
    return cities
  }
  getCities();


<div>
        <label htmlFor="city">County</label>
        <select name="city"
        onChange={(e) => setCity(e.target.value)}
        >
          {cities.map((city) => {
            return (
              <option value={city} key={city}>{city}</option>
            )
          })}
        </select>
      </div>

Answer 1

Try following....

const countryCityMap = {
  "ALBA": [{
      "name": "ABRUD",
      "zip": "515100",
      "lat": "46.274675",
      "long": "23.065029"
    },
    {
      "name": "ABRUD-SAT",
      "zip": "515101",
      "lat": "46.283967",
      "long": "23.061093"
    }
  ]
}

function bindCountryCity(countryCityMap) {
  const countrySelector = document.querySelector('#countrySelector');

  const citySelector = document.querySelector('#citySelector');

  if (countrySelector) {
    clearOptions(countrySelector);
    addDefault(countrySelector);

    // Populate Countries
    Object.keys(countryCityMap).forEach(country => addOption(countrySelector, country, country));

    countrySelector.onchange = countrySelected
  }

  if (citySelector) {
    citySelector.onchange = function(selector) {
      console.log('[City Selection Changed]', selector.target.value);
    }
  }

  function addDefault(selector) {

    if (selector) {
      const defaultValue = selector.getAttribute('data-default-value') || 'select';
      const defaultText = selector.getAttribute('data-default-text') || 'select';
      addOption(selector, defaultText, defaultValue);
    }
  }


  function addOption(selector, optionText, optionValue) {
    if (selector) {
      selector.add(new Option(optionText, optionValue));
    }
  }


  function clearOptions(selector) {

    if (selector) {
      while (selector.options.length) {
        selector.remove(0);
      }
    }
  }

  function countrySelected(selectionChanged) {
    const selectedCountry = selectionChanged.target.value;
    console.log('[Country Selection Changed]', selectedCountry);

    clearOptions(citySelector);
    addDefault(citySelector);
    if (countryCityMap[selectedCountry]) {
      // populate corresponding cities
      countryCityMap[selectedCountry].map(cityEntry => getCityNames(cityEntry)).filter(x => (x || '').trim()).forEach(city => addOption(citySelector, city, city));
    }

    function getCityNames(cityEntry) {
      if (cityEntry && (cityEntry.name || '').trim()) {
        return (cityEntry.name || '').trim();
      }
    }
  }
}

bindCountryCity(countryCityMap);

<div>
  <select id="countrySelector" data-default-value="select_a_country" data-default-text="Select a country" style="margin: 10px; float: left">
    <option value="select_a_country">Select a country</option>
  </select>
</div>

<div>
  <select id="citySelector" data-default-value="select_a_city" data-default-text="Select a city" style="margin: 10px">
    <option value="select_a_city">Select a city</option>
  </select>
</div>