If property undefined or does not exist

Question

Need a little help. I have an array of properties that I filter on. However, if a property does not exist my view does not render because that properties becomes undefined. I need to gracefully ignore or show some other value.

export const countryList = [
    {name: 'France', flagCode: 'fr'},
    {name: 'England', flagCode: 'england'},
    {name: 'Germany', flagCode: 'gm'},
    {name: 'default', flagCode: 'default'},
];

const country = `${nationality}`
const flag = countryList.filter(function (el) {
    return el.name.toLowerCase() === country.toLowerCase();
})[0].flagCode;

So if ${nationality} returned "Italy", .flagCode would return undefined. I could add Italy to my array to solve this however there will be countries I miss and need a more graceful approached. So In my function I need to check if undefined, if it is then return a default name of 'default', if it does exist then return the value from the array. Thanks in advance.

https://stackoverflow.com/questions/1098040/checking-if-a-key-exists-in-a-javascript-object/22074727#22074727 — Teemu, Jun 21 '18 at 08:50
Also, if you're expecting only one match then `.filter` is the wrong method. Use `.find` instead. — JJJ, Jun 21 '18 at 08:52

Jee Mok · Answer 1 · 2018-06-21T09:02:14.863

2

You can use an OR operator || to do this

const country = countryList.find(el => (el.name.toLowerCase() === country.toLowerCase());

const flag = (country && country.flagCode) || 'default';

edited Jun 21 '18 at 09:02

answered Jun 21 '18 at 08:51

Jee Mok

6,157
8
47
80

2

This makes no sense. `map` returns new array. OP wants to get a string. – Yury Tarabanko Jun 21 '18 at 08:52
well if it's not found then yeah :D we can add a simple validation if needed `(country && country.flagCode)` – Jee Mok Jun 21 '18 at 09:02

score 1 · Accepted Answer · answered Jun 21 '18 at 08:54

You can apply some to check existence first, if it's false, directly assign a default, else, run your filter code

let countryList = [
  {name: 'France', flagCode: 'fr'},
  {name: 'England', flagCode: 'england'},
  {name: 'Germany', flagCode: 'gm'},
  {name: 'default', flagCode: 'default'},
];

const country = `Italy`;
let flag = "";

if(countryList.some(x=>x.name === country)){
  flag = countryList.filter(function (el) {
       return el.name.toLowerCase() === country.toLowerCase();
     })[0].flagCode;
}else{
  flag = "default"
}

console.log(flag);

score 1 · Answer 3 · answered Jun 21 '18 at 09:04

const country = countryList.filter(function (el) {
    return el.name.toLowerCase() === country.toLowerCase();
})[0];

you can use default values

const flag = country.flagCode || 'default';

OR you can use ternary operators as well, which is again the same thing as above

const flag = !!country.flagCode ? country.flagCode : 'default';

If property undefined or does not exist

3 Answers3