cada entrada en el JSON, se ve así:
{ "ALBA": [ { "name": "ABRUD", "zip": "515100", "lat": "46.274675", "long": "23.065029" }, { "name": "ABRUD-SAT", "zip": "515101", "lat": "46.283967", "long": "23.061093" }, }El primer objeto es el nombre del condado, tengo más de ellos, pero solo di un ejemplo, los objetos anidados son las ciudades. Lo que quiero es una forma de mostrarlos en una etiqueta de selección en HTML, pero no puedo hacerlo.
Tengo el siguiente código, hasta ahora:
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();Y en html:
<div> <select name="city"> <option value={cities}>{cities}</option> </select> </div>¿Cómo puedo hacer que esta etiqueta de selección me devuelva exactamente los condados y cómo hacer que otra me muestre el nombre de las ciudades según el condado seleccionado?
EDITAR: Me las arreglé para hacerlo haciendo lo siguiente:
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>Intenta seguir....
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>