Access javascript object value by array

Question

I have an object like: const obj = { 'abc': {'def': 1 } } and I have an array like const arr = ['abc', 'def'] How can I access obj.abc.def property of my object with the array?

Obviously, obj[arr] doesn't work, also obj[arr.join('.') doesn't work.

What I want to do is:

const obj = { 'abc': {'def': 1 } } 
const arr = ['abc', 'def']
const value = obj[arr] // crash 
// value should contain 1 

• gforce301: It's my questioning nature. I just can't help myself. Why? Why would you ever want or need to do this? In my experience, if you find yourself needing to do something this edge case there's a bigger flaw in you design than this. Think about it. Every answer is going to be some variation of a loop.

Answer 1

You could take a dynamic approach and reduce the keys and take a default object, if a part is not accessable.

const
 getValue = (object, keys) => keys.reduce((o, k) => (o || {})[k], object),
 obj = { abc: { def: 1 } },
 arr = ['abc', 'def'],
 value = getValue(obj, arr);
console.log(value);
console.log(getValue(obj, ['foo', 'bar']));

Answer 2

The base is

const obj = { 'abc': {'def': 1 } } 
const arr = ['abc', 'def']
console.log(obj[arr[0]][arr[1]]);

or if you need to do it with a function...

const obj = { 'abc': {'def': 1 } } 
const arr = ['abc', 'def']
function access(obj, arr) {
 return arr.reduce((o, key) => o[key], obj);
}
console.log(access(obj, arr));

Answer 3

const obj = { 'abc': {'def': 1 } } 
const arr = ['abc', 'def']
var value = obj;
for(let key of arr){
 value = value[key];
}
console.log(value);

Answer 4

You can access the array property by index only. so arr[0] will work.

const obj = { 'abc': {'def': 1 } } 
const arr = ['abc', 'def']
const value = obj[arr[0]][arr[1]]
console.log(value)

or you can run the loop over it.

const obj = { 'abc': {'def' : {'ghi': 1 } } };
const arr = ['abc', 'def', 'ghi'];
let ans = null;
for (let i=0; i<arr.length; i++) {
 if(i==0) {
 ans = obj[arr[0]];
 }
 else {
 ans = ans[arr[i]];
 }
}
console.log(ans)

• mstruebing: But that indicates that I need to know before how deep the object is nested which I don't know.
• Rinkesh Golwala: You can run the loop over it in that case.
• Gershom Maes: The depth of the property will be arr.length
• Rinkesh Golwala: You can try the updated answer. BTW @hev1 has given a good answer.

Answer 5

You can use Array#reduce for a dynamic array.

const obj = { 'abc': {'def': 1 } } 
const arr = ['abc', 'def']
const res = arr.reduce((o,prop)=>o[prop], obj);
console.log(res);

If you do not want errors to be thrown on properties that do not exist, you can use the optional chaining operator.

const obj = { 'abc': {'def': 1 } } 
const arr = ['abc', 'def', 'notdefined', 'notdefined2']
const res = arr.reduce((o,prop)=>o?.[prop], obj);
console.log(res);

Answer 6

What you try to do is somewhat called object value "get by path", some library have support this and for example ramda is a production-ready library for that, you should not try to reinvent the wheel (practice is okay)

In your context, ramda's path method could help you achieve to the case of arbitrary array of properties

const obj = {
 'abc': {
 'def': 1,
 'ghi': {
 'jkl': 10
 }
 }
}
console.log(R.path(['abc', 'def'], obj))
console.log(R.path(['abc', 'ghi'], obj))
console.log(R.path(['abc', 'ghi', 'jkl'], obj))
console.log(R.path(['abc', 'ghi', 'jkl', 'mno'], obj))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

• DBS: "reinventing the wheel" is generally not an issue for small/simple ideas, on the other hand, including an entire library just for this snippet seems excessive and inefficient. (If you already use a library that has this functionality, by all means use it, but don't add a library just for this)