I seen many questions including this from 3 hours and still finding solution please help. Actually I am trying to map in an js file which return an array of object of array of object,
Structure of DataSet : country[{name:value, states: [{name:value},{....},...]}, {......}, ....]
and get an Array of States Name
Please tell me what is wrong in this code Thanks in advance.
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);
}
Remember I want to achive this with map else with loop I did this below
for(let country of allCountryArray){
if(country.name == countrySelectionValue){
statesGot = country.states.map(state => state.name);
}
}
CodePudding user response:
You can achieve the same using the combination of find
and map
like below.
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);
}
CodePudding user response:
You should use Array.prototype.filter and 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);
CodePudding user response:
I would do it like this:
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>