Javascript - How to reference object nested values using an array as reference

Question

I am building some forms that need to handle entities that might have nested objects. So I need the interface to accept as the field key either a string or an array of strings with each piece of the path to the value (like the example below).

const obj = {
    name: "John",
    role: {
        id: 1,
        name: "admin"
    }
}

const key1 = 'name'
const key2 = ['role', 'name']

function getValueByKey (key, obj) {

    if (Array.isArray(key)) {
        //Get value if key is array.
    } else {

        return obj[key]
    }
}

console.log(getValueByKey(key1, obj))
//Should output "John"
console.log(getValueByKey(key2, obj))
//Should output "admin"

Nina Scholz · Accepted Answer · 2020-09-30 18:23:06Z

1

You could take a recursive approach by using the key at index zero for handing over a nested property of the given object.

function getValueByKey(key, obj) {
    return Array.isArray(key) && key.length > 1
        ? getValueByKey(key.slice(1), obj[key[0]])
        : obj[key];
}

const
    obj = { name: "John", role: { id: 1, name: "admin" } },
    key1 = 'name',
    key2 = ['role', 'name'];

console.log(getValueByKey(key1, obj)); // "John"
console.log(getValueByKey(key2, obj)); // "admin"

An iterative approach

function getValueByKey(key, obj) {
    return [].concat(key).reduce((o, k) => o[k], obj);
}

const
    obj = { name: "John", role: { id: 1, name: "admin" } },
    key1 = 'name',
    key2 = ['role', 'name'];

console.log(getValueByKey(key1, obj)); // "John"
console.log(getValueByKey(key2, obj)); // "admin"

edited Sep 30, 2020 at 18:23

answered Sep 30, 2020 at 18:01

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

V Maharajh · Accepted Answer · 2020-10-01 16:40:57Z

1

Use Lodash's get method. It does exactly what you want.

https://lodash.com/docs/#get

_.get(obj, 'name');
// => John
 
_.get(obj, "role.name");
// => admin

If you're unable to use lodash directly, you can always look at its implementation here; it is as tried-and-tested as it gets.

edited Oct 1, 2020 at 16:40

answered Sep 30, 2020 at 17:58

V Maharajh

9,7795 gold badges34 silver badges35 bronze badges

Collectives™ on Stack Overflow

Javascript - How to reference object nested values using an array as reference

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related