How to null check object property with a variable

Question

data, roles and infos are variables that came from an API, Here I manually add array's index whereas in my code I loop the keys.

How to one line check if the attribute is null ?

Is there a way to access property like x?[roles[0]]?[infos[0]]

const data = [{player: {fname: 'player', lname: 'one'}, 
              { enemy: {lname: 'two'},
              {  ally: {fname: 'player'}]
const roles = ['player','ally']
const infos  = ['fname','lname']

data.map(x => {
    const firstPlayer  = `${x[roles[0]][infos[0]]} ${x[roles[0]][infos[1]]}`
    const secondPlayer = `${x[roles[1]][infos[0]]} ${x[roles[1]][infos[1]]}`
    return `hello ${firstPlayer} and ${secondPlayer}`
});

Looks like your `data` array is not a valid one. Can you please cross check and correct that. So that it will be helpful to provide a correct approach for the requirement. — Debug Diva, Jun 23 '22 at 10:48

score 1 · Answer 1 · answered Jun 23 '22 at 10:42

1

You can use optional chaining, this works on array indexes also.

const firstPlayer  = `${x?.[roles[0]]?.[infos[0]]} ${x?.[roles[0]]?.[infos[1]]}`

Just note that you'll get undefined inside the string if the chain is broken.

answered Jun 23 '22 at 10:42

Radu Diță

13,476
2
30
34

Doc · Accepted Answer · 2022-06-23T11:06:19.510

I would use a fallback value to cover undefined values like this:

const data = [
{
      player: {
        fname: 'player',
        lname: 'one'
      },
      
        enemy: {
          lname: 'two'
        },
        
          ally: {
            fname: 'player'
          }}];
        const roles = ['player', 'ally'];
        const infos = ['fname', 'lname'];

        const res = data.map((x) => {
          const firstPlayer = (x[roles[0]][infos[0]] || '') + ' ' + (x[roles[0]][infos[1]] || '')
          const secondPlayer = (x[roles[1]][infos[0]] || '') + ' ' + (x[roles[1]][infos[1]] || '')
          return ('hello ' + firstPlayer + ' and ' + secondPlayer).trim();
        });

        console.log(res);

By using (maybeUndefinedVar || 'fallbackValue') you can handle when the value is missing.

Note that this is valid only if you are sure your first property access is surely not undefined. In the opposite case, you should also apply the other anwser solution, and access properties in safety way like the following:

const data = [
{
      player: {
        fname: 'player',
        lname: 'one'
      },
      
        enemy: {
          lname: 'two'
        },
        
          allyNotExist: {
            fname: 'player'
          }}];
        const roles = ['player', 'ally'];
        const infos = ['fname', 'lname'];

        const res = data.map((x) => {
          const firstPlayer = (x?.[roles[0]]?.[infos[0]] || '') + ' ' + (x?.[roles[0]]?.[infos[1]] || '')
          const secondPlayer = (x?.[roles[1]]?.[infos[0]] || 'NoName') + ' ' + (x?.[roles[1]]?.[infos[1]] || 'NoSurname')
          return ('hello ' + firstPlayer + ' and ' + secondPlayer).trim();
        });

        console.log(res);

As you see, ally is no more present, and this way we are safe. If ally is not present in the first example, it fail for accessing properties of undefined.

P.s. Sorry if i changed from ` strings to ' strings concat, but this snippent doesn't allow ` syntax.

This should be

const firstPlayer  = `${(x?.[roles[0]]?.[infos[0]] || '')} ${(x?.[roles[0]]?.[infos[1]] || '')}`

How to null check object property with a variable

2 Answers2