How do I get a certain object key via a function?

Question

I'm trying to create error messages for form validation in multiple languages. Unfortunately, the transfer of the "target" parameter to my function does not work. Maybe target is interpreted as a string?!

function formMessages(field, target) {
  var messages = {
    'de' : {
      'valueMissing': 'Bitte füllen Sie dieses Feld aus.',
      'typeMismatch': {
        'email': 'Bitte geben Sie eine E-Mail ein.',
        'url': 'Bitte geben Sie eine URL ein.'
      }
    }
  };

  // Don't work!
  // return messages.de.target;

  // This works! But it is not dynamic!
  // return messages.de.typeMismatch.email;
}

if (validity.typeMismatch) {
  // Email
  if (field.type === 'email') return formMessages(field, 'typeMismatch.email');
}

Try to `console.log(messages["de"]["valueMissing"]);` in order to see if you actually go to the message. — ZombieChowder, Apr 06 '18 at 08:32
https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key — shakib, Apr 06 '18 at 08:34
That's because you are passing string as argument and are using dot notation, instead use [ ] notation and pass 'typeMismatch' , 'email' as two separate arguments or spilt() 'typeMismatch.email' into two — Vishal-L, Apr 06 '18 at 08:37

score 2 · Accepted Answer · answered Apr 06 '18 at 08:32

2

Use eval Method

return eval('messages.de.'+target);

answered Apr 06 '18 at 08:32

Jaydip Jadhav

12,179
6
24
40

xianshenglu · Answer 2 · 2018-04-06T08:40:33.180

try this:

function formMessages(field, target) {
  var messages = {
    de: {
      valueMissing: "Bitte füllen Sie dieses Feld aus.",
      typeMismatch: {
        email: "Bitte geben Sie eine E-Mail ein.",
        url: "Bitte geben Sie eine URL ein."
      }
    }
  };

  return target.split(".").reduce((re, v) => re[v], messages.de);

  // This works! But it is not dynamic!
  // return messages.de.typeMismatch.email;
}

if (validity.typeMismatch) {
  // Email
  if (field.type === "email") return formMessages(field, "typeMismatch.email");
}

messages.de.targetequalsmessages['de']['target'],so target works as string.

If you want target works as variable,it should be messages.de[target].

However,in your case,target is typeMismatch.email,so you have to use reduce to accumulate.

score 0 · Answer 3 · answered Apr 06 '18 at 08:34

Use bracket notation to access the dynamic property

function formMessages(field) 
{
  var messages = {
    'de' : {
      'valueMissing': 'Bitte füllen Sie dieses Feld aus.',
      'typeMismatch': {
        'email': 'Bitte geben Sie eine E-Mail ein.',
        'url': 'Bitte geben Sie eine URL ein.'
      }
    }
  };

  return messages.de.typeMismatch[ field.type ]; //pass the field.type itself
}

if (validity.typeMismatch) 
{
  if ( field.type === 'email') return formMessages(field); //pass the field itself
}

score 0 · Answer 4 · answered Apr 06 '18 at 08:41

If you are passing strings as arguments then use [ ] notation and pass 'typeMismatch' , 'email' as two separate arguments.

function formMessages(field, target1, target2) {
  var messages = {
    'de' : {
      'valueMissing': 'Bitte füllen Sie dieses Feld aus.',
      'typeMismatch': {
        'email': 'Bitte geben Sie eine E-Mail ein.',
        'url': 'Bitte geben Sie eine URL ein.'
      }
    }
  };

  return messages.de[target1][target2];

}

if (validity.typeMismatch) {
  // Email
  if (field.type === 'email') return formMessages(field, 'typeMismatch', 'email');
}

How do I get a certain object key via a function?

4 Answers4