How to map array of object of array of object? Not working in node

Question

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

Please add more info about what is the result you get, and why it's wrong. Any eventual error message too. — Cesare Polonara, Apr 10 '22 at 15:07
I wanted an array of states with first example i am just getting ```[Object Object]``` @CesarePolonara — Tirath Sharma, Apr 10 '22 at 15:13

score 0 · Accepted Answer · answered Apr 10 '22 at 15:20

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

Thank you so much sumit ji to taught me that i can achive this with find also that i never thaught, — Tirath Sharma, Apr 11 '22 at 06:16

score 0 · Answer 2 · answered Apr 10 '22 at 15:20

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

Thanks for your reply let i see first how can i use flatMaps in this, Thank you so much — Tirath Sharma, Apr 11 '22 at 06:20

score 0 · Answer 3 · answered Apr 10 '22 at 15:22

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>

I can't even thaught that we can achive this with reduce and maps too. Thanks for reply. — Tirath Sharma, Apr 11 '22 at 06:33

How to map array of object of array of object? Not working in node

3 Answers3