0

I am receiving an array of country codes as props like this: ['en', 'ro', 'da']. What would be the best way to map it back to their names in an object like this: {value: 'en', label: 'English}.

alliengrv
  • 21
  • 4

1 Answers1

0

Try with this pattern:

const myCountries = ['en', 'ro']; 
const data= [{EN: "England"}, {RO: "Romania"}, {DA: "Denmark"}];

const getCountriesOption = () => {
const countriesOptions = data.map(
  country => ({ value: Object.keys(country)[0], label: country[Object.keys(country)[0]] }))
      
  return countriesOptions;
    }
// All options
console.log(getCountriesOption());
// Only my countries
console.log(getCountriesOption().filter(
obj => myCountries.includes(obj.value.toLowerCase())));
Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43
  • I am trying this pattern with `const countriesList = countries.all.map(c => ({ [c.alpha2]: c.name }));` instead of `"en": "English"` etc and I always get None back – alliengrv Dec 19 '18 at 12:18
  • This is not clear, the snippet run flawlessly so you are missing something. If key exists, value will be returned. Provide the current structure of datasource and I can update my snippet – Mosè Raguzzini Dec 19 '18 at 12:43
  • `countriesMap = countries.all.map(c => ({ [c.alpha2]: c.name }))` returns an array of objects that looks like this: `{AC: "Ascension Island"}` – alliengrv Dec 19 '18 at 12:51
  • countriesMap = countries.all.map(c => ({ value: c.alpha2, label: c.name })) – Mosè Raguzzini Dec 19 '18 at 12:59
  • Shouldn't I pass the countriesMap to getCountry like this? `const getCountry = (shortName) => (countriesMap)[shortName] || "None"` – alliengrv Dec 19 '18 at 13:02
  • It depends of the structure of starting data. What do you have, a complex array with all the data or only an array of short codes as in the question ? – Mosè Raguzzini Dec 19 '18 at 13:04
  • For the example that I am working on I am just passing `['en', 'ro', 'da']` but in the future I need to take account for every possible language that will be inside the countries library so I can't just use 'en': 'English' etc, maybe the next array will be `['de', 'en', 'el']` , I need to pass all the countries. I am trying to pass the countriesMap but It is still returning 'None' – alliengrv Dec 19 '18 at 13:09
  • your getCountry map/switch could contains any number of keys. If you pass in a existing shortCode it will return longCode. All other aspect of your implementation depends on the code you're working on so for further help you should provide a working snippet. – Mosè Raguzzini Dec 19 '18 at 13:14
  • I am trying to use your getCountry function but instead of passing `"en": "English", "ro": "Romania", "da": "Denmark"` I am passing `const countriesMap = countries.all.map(c => ({ [c.alpha2]: c.name }));` like so: `const getCountry = (shortName) => (countriesMap)[shortName] || "None";` When I try to run getCountry with a parameter of 'AC', I get 'None' back even though 'AC' exists on countriesMap as `{AC: "Ascension Island"}` What am I doing wrong? – alliengrv Dec 19 '18 at 13:24
  • Can you provide a snippet so I can adjust it ? – Mosè Raguzzini Dec 19 '18 at 13:27
  • `const languageNames = ['EN', 'DA', 'NO']; const countriesMap = countries.all.map(c => ({ [c.alpha2]: c.name })); const getCountry = (shortName) => (countriesMap)[shortName] || "None"; const countryOptions = languageNames.map( value => ({ value, label: getCountry(value) }) )` , countries comes from the country-data library that returns all the countries like I explained like `{AC: "Ascension Island"}` etc – alliengrv Dec 19 '18 at 13:30
  • Update the snipped to reflect your data structure and remove unnecessary steps – Mosè Raguzzini Dec 19 '18 at 13:50