如何映射对象数组的对象数组？不在节点中工作

Question

我在 3 小时内看到了很多问题，包括，但仍在寻找解决方案，请帮忙。实际上，我正在尝试映射一个 js 文件，其中 return 对象数组的对象数组，

Structure of DataSet : country[{name:value, states: [{name:value},{....},...]}, {......}, ....]

并获取 States Name

的数组

请告诉我这段代码有什么问题提前致谢。

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

记住我想用 map else 循环实现这个我在下面做了这个

for(let country of allCountryArray){
        if(country.name == countrySelectionValue){
            statesGot = country.states.map(state => state.name);
        }
    }

Answer 1

您可以使用 find 和 map 的组合实现相同的效果，如下所示。

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

Answer 2

你应该使用 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);

Answer 3

我会这样做：

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>

如何映射对象数组的对象数组？不在节点中工作

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

javascript

hashmap

express