Trying to get an object value in from a key in Javascript

Question

I'm trying to get a country label (name) from a value (country code) in an object.

In Vue.js I'm trying to build a computed property to return the name of the country based on the country code from an API request.

In the template:

countryLabel () {
 var countries = require('../../plugins/countries')
 var countryCode = this.content.country
 function getLabelByValue(countries, countryCode) {
 return Object.keys(countries).find(label => countries[value] === countryCode)
 }
}

From a list of countries:

module.exports = [
 { value: 'AF', label: 'Afghanistan' },
 { value: 'AX', label: 'Aland Islands' },
 { value: 'AL', label: 'Albania' },
 { value: 'DZ', label: 'Algeria' },
 { value: 'AS', label: 'American Samoa' },
 { value: 'AD', label: 'Andorra' },
 { value: 'AO', label: 'Angola' },
 { value: 'AI', label: 'Anguilla' },
 { value: 'AQ', label: 'Antarctica' },
 { value: 'AG', label: 'Antigua and Barbuda' },
 ...
]

• abhishekkannojia: So what's the problem ?
• Jack Barham: I'm not getting anything returned
• mhodges: Well, Object.keys on an array will return you 0->n. I think what you want is simply countries.find(country => country.value === countryCode)

Answer 1

You probably don't want to be calling Object.keys on an array.

Something like this is probably more what you want:

function getLabelByValue(countries, countryCode) {
 const entry = countries.find(item => item.value === countryCode);
 return entry ? entry.label : null;
}

The problem is that calling Object.keys on an array will return an array of numbers that have been converted to strings:

> console.log(Object.keys(['this', 'is', 'an', 'array']));
['0', '1', '2', '3']

Since your exports is already an array, you can call find() on it directly.

• Jack Barham: I had to remove the function wrapped around it, but it's worked. Thanks.

Answer 2

A better way to do this would be to use an object, which is always the fastest way to lookup anything in javascript because objects are dictionaries. So if you changed your export to look like: { AF: 'Afghanistan', AX: 'Aland Islands', etc... } then you'd be able to do instant lookups by doing countries[countryCode].

• Jack Barham: Thanks. Out of curiosity, how would you do the look up?
• frodo2975: See the last part of my post. It's just a regular object, so you'd do something like `countries['AF'], and you'd get the value of that key.
• Jack Barham: I see what you mean. Thanks

Answer 3

Based on rossipedia's answer this is working for me:

countryLabel () {
 const countries = require('../../plugins/countries')
 return countries.find(item => item.value === this.content.country).label
}

• mhodges: Just be careful about the this context. If you decide to change your arrow function into a standard function, this code will break.