从 JSON 中获取值

Question

JSON 中的每个条目如下所示：

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

第一个对象是县名，我还有很多，但我只是举个例子，嵌套对象是城市。我想要的是一种在 HTML 的选择标签中显示它们的方法，但我无法做到。

到目前为止，我有以下代码：

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();

在 html 中：

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

如何让这个选择标签准确地返回我的县，以及如何让另一个标签根据所选县向我显示城市名称？

编辑： 我设法做到了以下几点：

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

尝试关注....

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>