JS: How to get values deeper then first level with dynamic keys in object?

Question

Here I have an issue(sample code below). How to get rid of undefined? In my case I can use only one variable like

object[dynamicKey]

but if the key is deeper in object then first level I get errors.

object = {
  name: 'peter',
  kidsNames: {
    name: 'carlos',
  }
}

dynamicKey1 = 'name';
dynamicKey2 = 'kidsNames.name';

console.log(object[dynamicKey1]); // 'peter'
console.log(object[dynamicKey2]); // undefined ???

I want a solution in pure JavaScript

SOLUTION:

Thanks for the help!

With your help guys I came up with solution like:

const getProp = (obj, prop) => {
   return prop.split('.').reduce((r, e) => {
       return r[e];
   }, obj);
};

getProp(object, dynamicKey2) // 'carlos'

So now you it doesent matter how deep into object you need to go it always gives you the right value.

See https://stackoverflow.com/questions/45670640/indicating-various-properties-of-html-objects/45670739#45670739 — Nenad Vracar, Aug 16 '17 at 08:54
`object['kidsNames']['name']`. You have to use multi diamension array syntax — Sagar V, Aug 16 '17 at 08:55
@ErrorinException OP wants to get access of a properties by string which won't work. — Suresh Atta, Aug 16 '17 at 08:57
@ErrorinException Yes almost . There are other ways too. I shown a one which made someone angry :D — Suresh Atta, Aug 16 '17 at 09:00
hmm you made someone angry :D don't know how but your answer worth an answer. But FMPOV this Q should be closed as norepro — Sagar V, Aug 16 '17 at 09:02

Suresh Atta · Answer 1 · 2017-08-16T09:02:22.817

It doesn't work because JS thinks that kidsNames.name itself as a key name and tries to do

object['kidsNames.name']

Which don't work. But you can start with a basic idea

var keyNames = dynamicKey2.split(".");
object[keyNames[0]][keyNames[1]];

If you have n levels try using a loop.

 
var myobject = {
    name: 'peter',
    kidsNames: {
        name: 'carlos',    
    }
}

dynamicKey1 = 'name';
dynamicKey2 = 'kidsNames.name';

var keyNames = dynamicKey2.split(".");


console.log(myobject[dynamicKey1]); // 'peter'
console.log(myobject[keyNames[0]][keyNames[1]]);  //carlos

score 0 · Answer 2 · answered Aug 16 '17 at 09:00

Use can use recursive call to solve this. see code below:

var object = {
    name: 'peter',
    kidsNames: {
        name: 'carlos',    
    }
}

dynamicKey1 = 'name';
dynamicKey2 = 'kidsNames.name';

object[dynamicKey1]; // 'peter'
object[dynamicKey2];

function getValue(data, keys) {
  // If plain string, split it to array
  if(typeof keys === 'string') {
    keys = keys.split('.')
  }
  
  // Get key
  var key = keys.shift();
  
  // Get data for that key
  var keyData = data[key]
  
  // Check if there is data
  if(!keyData) {
    return undefined;
  }
   
  // Check if we reached the end of query string
  if(keys.length === 0){
    return keyData;
  }
  
  // recusrive call!
  return getValue(Object.assign({}, keyData), keys);
}

console.log(getValue(object, dynamicKey1))
console.log(getValue(object, dynamicKey2))

score 0 · Answer 3 · answered Aug 16 '17 at 09:22

object = {
  name: 'peter',
  kidsNames: {
    name: 'carlos',
    child: {
      name: 'myChild',
      child: {
        fullname: 'Sam williams'
      }
    }
  }
}

dynamicKey1 = 'name';
dynamicKey2 = 'kidsNames.name';
dynamicKey3 = 'kidsNames.child.name';
dynamicKey4 = 'kidsNames.child.child.fullname';
console.log(reduce(object, dynamicKey1));
console.log(reduce(object, dynamicKey2));
console.log(reduce(object, dynamicKey3));
console.log(reduce(object, dynamicKey4));


function reduce(obj, key) {
  var keySplit = key.split('.');
  if (keySplit.length > 1) {
    return reduce(obj[keySplit[0]], keySplit.slice(1, keySplit.length).join("."));
  }
  if (keySplit.length == 1) {
    return obj[key];
  } else {
    return obj;
  }
}

This will work for any number of child elements, if they are object, but not array or list. (recursive method)

JS: How to get values deeper then first level with dynamic keys in object?

3 Answers3