Is it possible to retrieve a value within nested objects using only a single string as the reference?

Question

Is it possible to retrieve a value within nested objects using only a single string as the reference?

Can a value inside a nested object be accessed with a single string? For example, consider the object below:

skill: {
    skillDetails: {
        developerDetails: {
            developerName: "mr. developer"
        }
    }
}

Is there a way to retrieve the value using a "JSON path" like this:

skill["skillDetails.developerDetails.developerName"]

?

I am exploring this possibility because I need to pass the key & object into a function (that I cannot modify) which simply returns object[key]

Not certain if this is achievable, hence seeking advice from the community.

Thank you!

javascript json object

Answer 1

Answer №1

To solve this problem without using a built-in method, you can use a simple technique that involves utilizing the split() and reduce() functions. Here's an example:

var user = {
  userDetails: {
    accountDetails: {
      userName: "john_doe"
    }
  }
}

var path = "userDetails.accountDetails.userName";

var result = path
.split('.') // Split the path into individual parts using '.'
.reduce((obj, part) => obj ? obj[part] : undefined, user); // Use reduction to extract the desired value

console.log(result)

Answer 2

To solve this problem without using a built-in method, you can use a simple technique that involves utilizing the split() and reduce() functions. Here's an example:

var user = {
  userDetails: {
    accountDetails: {
      userName: "john_doe"
    }
  }
}

var path = "userDetails.accountDetails.userName";

var result = path
.split('.') // Split the path into individual parts using '.'
.reduce((obj, part) => obj ? obj[part] : undefined, user); // Use reduction to extract the desired value

console.log(result)

Answer 3

Answer №2

Unfortunately, there isn't a straightforward built-in solution for this task. You'll have to create a helper function to get it done.

lodash has a feature to achieve this using the syntax _.get(obj, property).

Here's an example from the documentation:

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// → 3

_.get(object, ['a', '0', 'b', 'c']);
// → 3

_.get(object, 'a.b.c', 'default');
// → 'default'

Answer 4

Unfortunately, there isn't a straightforward built-in solution for this task. You'll have to create a helper function to get it done.

lodash has a feature to achieve this using the syntax _.get(obj, property).

Here's an example from the documentation:

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// → 3

_.get(object, ['a', '0', 'b', 'c']);
// → 3

_.get(object, 'a.b.c', 'default');
// → 'default'

Answer 5

Answer №3

When working with plain JS, the common practice is to utilize Array.reduce as it allows you to traverse the path efficiently to reach the desired value. However, sometimes scenarios involving functions along the path are overlooked. Take a look at this example:

var obj = {
  foo: {
    bar: {
      fooBar: "BARFOO",
      foo: function() { return { c: 'BAR' }}
    }
  }
}

const get = (obj, path) => path.split('.').reduce((r,c) => {
  return r ? typeof r === 'function' ? r()[c] : r[c] : undefined
}, obj)

console.log(get(obj, 'foo.bar.fooBar'))
console.log(get(obj, 'foo.bar.foo'))
console.log(get(obj, 'foo.bar.foo.c'))

Notice that to access the value of foo.bar.foo.c, you have to navigate through a function and execute it. This process can be streamlined by using _.result from lodash:

var obj = {
  foo: {
    bar: {
      fooBar: "BARFOO",
      foo: function() { return { c: 'BAR' }}
    }
  }
}

console.log(_.result(obj, 'foo.bar.fooBar'))
console.log(_.result(obj, 'foo.bar.foo'))
console.log(_.result(obj, 'foo.bar.foo.c'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

It's important to note the difference between _.get, which only retrieves values without traversing through functions, and _.has, which returns a boolean to indicate the validity of the specified path.

Answer 6

When working with plain JS, the common practice is to utilize Array.reduce as it allows you to traverse the path efficiently to reach the desired value. However, sometimes scenarios involving functions along the path are overlooked. Take a look at this example:

var obj = {
  foo: {
    bar: {
      fooBar: "BARFOO",
      foo: function() { return { c: 'BAR' }}
    }
  }
}

const get = (obj, path) => path.split('.').reduce((r,c) => {
  return r ? typeof r === 'function' ? r()[c] : r[c] : undefined
}, obj)

console.log(get(obj, 'foo.bar.fooBar'))
console.log(get(obj, 'foo.bar.foo'))
console.log(get(obj, 'foo.bar.foo.c'))

Notice that to access the value of foo.bar.foo.c, you have to navigate through a function and execute it. This process can be streamlined by using _.result from lodash:

var obj = {
  foo: {
    bar: {
      fooBar: "BARFOO",
      foo: function() { return { c: 'BAR' }}
    }
  }
}

console.log(_.result(obj, 'foo.bar.fooBar'))
console.log(_.result(obj, 'foo.bar.foo'))
console.log(_.result(obj, 'foo.bar.foo.c'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

It's important to note the difference between _.get, which only retrieves values without traversing through functions, and _.has, which returns a boolean to indicate the validity of the specified path.

Is it possible to retrieve a value within nested objects using only a single string as the reference?

Answer №1

Answer №2

Answer №3

Similar questions

Unable to store the user's input information in the database

Dynamic rule addition with JQuery Validation

Updating styled-components variables based on media queries - A step-by-step guide

The initial state in NextJS fails to update when routing to the same page with different parameters

Import divX from page2 into page 1 by utilizing jsonp to circumvent the restrictions of the same origin policy

Error: [Errno 22] occurred while attempting to read a JSON file with .read() method

Determining When the Collapse Transition in Material UI 5 is Complete

React Grid by DevExtreme

Transmitting JSON Web Tokens from AngularJS to Node.js

Concentrate on Selecting Multiple Cells in ag-Grid (Similar to Excel's Click and Drag Feature)

Transforming EJB into a JSON-based web service

Mongoose JS is unable to display the query value in the output

Preserving the top line or heading while cutting through a table

Updating the content of a Telerik RadEditor using Javascript/jQuery

Permanently remove the span tag and any associated text from the HTML document

Is there a way to incorporate a fade-in effect when I trigger the expand function in this script?

Developing a Multi-Stage Pop-Up with Jquery

What is the best method for transforming a sizable JSON document into XML format?

Unable to access the inner object using key-value pair in Angular when working with Firebase

I have been utilizing ESBuild to compile JavaScript code for browser usage. However, I encountered an issue when trying to import CSS as I received an error message stating "Unexpected '.'". Can anyone provide guidance on how to resolve this issue?