Vi muchas preguntas, incluida esta de 3 horas y sigo encontrando una solución, por favor ayuda. En realidad, estoy tratando de mapear en un archivo js que devuelve una matriz de objetos de una matriz de objetos,
Estructura de DataSet : país[{nombre:valor, estados: [{nombre:valor},{....},...]}, {......}, ....]
y obtenga un nombre de matriz de estados
Por favor, dígame qué está mal en este código. Gracias de antemano.
const allCountryArray = require('../../data/allCountryArray.js'); const countrySelect = document.querySelector('#country'); const stateSelect = document.querySelector('#state'); const citySelect = document.querySelector('#city'); let countrySelectionValue; let statesGot; countrySelect.addEventListener('change', checkCountry); function checkCountry(e){ countrySelectionValue = e.target.value; if(!countrySelectionValue) return; statesGot = allCountryArray.map(country => { if(country.name == countrySelectionValue){ return country.states.map(state => state.name); } }) console.log(statesGot); }Recuerde que quiero lograr esto con el mapa, de lo contrario con bucle, hice esto a continuación
for(let country of allCountryArray){ if(country.name == countrySelectionValue){ statesGot = country.states.map(state => state.name); } }Yo lo haría así:
function checkCountry(e) { countrySelectionValue = e.target.value; statesGot = allCountryArray.reduce((arr, country) => { if (country.name === countrySelectionValue) arr = [...country.states.map((state) => state.name)]; return arr; }, []); console.log(statesGot); } const allCountryArray = [ { name: 'Italy', states: [{ name: 'it_state1' }, { name: 'it_state2' }] }, { name: 'France', states: [{ name: 'fr_state1' }, { name: 'fr_state2' }] }, { name: 'Germany', states: [{ name: 'ge_state1' }, { name: 'ge_state2' }] }, ]; let countrySelectionValue; let statesGot; function checkCountry(e) { countrySelectionValue = e.target.value; statesGot = allCountryArray.reduce((arr, country) => { if (country.name === countrySelectionValue) arr = [...country.states.map((state) => state.name)]; return arr; }, []); console.log(statesGot); } function makeSelect(data) { const select = document.createElement('select'); select.onchange = checkCountry; for (const opt of data) { const option = document.createElement('option'); option.value = opt.name; option.innerText = opt.name; select.appendChild(option); } document.body.appendChild(select); } makeSelect(allCountryArray); <html> <head> <meta charset="UTF-8" /> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <script src="script.js"></script> </body> </html>Puede lograr lo mismo usando la combinación de find y map como se muestra a continuación.
const allCountryArray = require('../../data/allCountryArray.js'); const countrySelect = document.querySelector('#country'); const stateSelect = document.querySelector('#state'); const citySelect = document.querySelector('#city'); let countrySelectionValue; let statesGot; countrySelect.addEventListener('change', checkCountry); function checkCountry(e){ countrySelectionValue = e.target.value; if(!countrySelectionValue) return; statesGot = allCountryArray .find(country => country.name == countrySelectionValue) .states.map(state => state.name) // Assuming that the array would definitely contain selected country value // else you would need to use null checks like below // statesGot = (allCountryArray // .find(country => country.name) || {}) // .(states || []).map(state => state.name) console.log(statesGot); }Debe usar Array.prototype.filter y flatMap .
const allCountryArray = [ { name: "US", states: [ { name: "California" }, { name: "Texas" } ] }, { name: "UK", states: [ { name: "England" } ] } ]; const countrySelectionValue = "US"; // for example const statesGot = allCountryArray .filter(country => country.name === countrySelectionValue) .flatMap(country => country.states.map(state => state.name)); console.log(statesGot);