approach for extracting values from nested objects using specified key

There are objects in my possession that contain various nested objects:

let obj = {
 nestedObject: {
  key: value
 }
}

or

let obj2 = {
 nestedObject2: {
  nestedObject3: {
   key2: value2 
  }
 }
}

and so on.

Retrieving the values from these objects is straightforward:

obj.nestedObject.key 
obj['nestedObject']['key']

or

obj2.nestedObject2.nestedObject3.key2
obj2['nestedObject2']['nestedObject3']['key2']

However, I need to handle this dynamically for any object structure that comes my way. I receive random objects with the same format and a string indicating where to locate the values. For example, for obj2 in the sample above, I would receive the string:

"nestedObject2.nestedObject3.key2"

How can I utilize this information to retrieve the desired value? The methods used previously no longer apply, and attempts like:

obj2['nestedObject2.nestedObject3.key2']

do not yield the expected results.

Answer №1

To extract the desired property, split the string using a period as the delimiter and then use the reduce method to navigate through nested objects.

str.split(".").reduce((accumulator, value) => (accumulator = accumulator[value], accumulator), parent_object);

let obj = {
    firstNestedObject: {
      secondNestedObject: {
        key: "value"
      }
    }
  },
  str = "firstNestedObject.secondNestedObject.key";

let result = str.split(".").reduce((accumulator, value) => (accumulator = accumulator[value], accumulator), obj);

console.log(result);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for assistance with troubleshooting my isotope.js [code written in jquery and html]?

Explore this JSFiddle link I'm attempting to create sortable fancybox images, similar to the filtering functionality seen on this website. I previously achieved this with v1 of isotope but have been struggling with v2. After countless attempts and ad ...

Ways to link two PHP scripts

My code snippet below aims to select a location from a dropdown menu and generate a pie chart based on data fetched from a PostgreSQL database. However, I am facing an issue where the pie chart displays all column values instead of only the selected locati ...

The "Key" function from Object.keys does not yield true when compared to an identical string

Object.keys(data).forEach((key) => { bannerData[key] = data[key][0]; console.log(key); if (key == "timestamp") { labels.push(data[key]); console.log("wtf"); console.log(labels); ...

Methods for updating the value of a `<select>` element in an AngularJS controller

Within my HTML code, I have a select element with options ranging from 1 to 10: <select id="selVal" ng-model="product.quantity" ng-options="o as o for o in quantityValues" ng-change="updateDelta(product.quantity, {{product.quantity}}, product.selec ...

Implementing Javascript to insert IFRAME into the DOM

I'm looking to incorporate an iframe into my webpage. The iframe needs to link to a specific URL. I attempted to add the following code to my HTML, but it's not functioning as expected: document.createElement('<iframe src='http://ex ...

Showing the values of selected checkboxes in a select dropdown - here's how!

Link to the jsfiddle : https://jsfiddle.net/a1gsgh11/9/ The JavaScript code seems to not be working on the js fiddle platform. My main concern is that I would like the selected checkbox values to display immediately without needing to submit any buttons. ...

I'm running into some issues with flexbox and I'm in need of some assistance to find

I positioned two divs next to one another, but instead of each taking up 100vw, they are both sharing 50% of the available space. Is there a solution for this issue? Thank you. Page Image import type { AppProps } from "next/app"; import "./global.cs ...

Can I use jqPlot to create a separate division for the legend?

Is it feasible to move the legend to a distinct div using jqPlot? legend: { show: true, placement: 'outside', fontSize: '11px', location: 'n' } ...

What is the method for retrieving the name of an object's property within an Angular template

I am trying to display the name of a nested object's property using Angular interpolation <ng-container ngFor="let item of saleDetailsAggegater.productMap | keyvalue"> <tr *ngFor="let qtyMap of item.value | keyvalue"&g ...

How can I modify the appearance of the bootstrap scrollbar with scrollspy?

I'm struggling to modify the color of the scrollbar in Bootstrap scrollspy despite having a functional scrollbar. Here is an example of my code: HTML: <body> <div class="container, scrollbar" id="myScrollspy"> <div class=" ...

Modification of a CSS element

The CSS I am working with looks like this: .cls .imageX { float:left; } .cls .imageY { float:right; } It is currently being used on a page in this way: <div class="cls"> <a href="" class="imageX"><img src="left.png"/></a> &l ...

What role do colors and tables play in Javascript?

Preparing for my upcoming Web Development exam, I stumbled upon an intriguing question: Here's how I tackled it: function pallete() { var components = ["00", "33", "66", "99", "CC", "FF"]; var context = document.body; var ...

Trouble keeping HTML/Javascript/CSS Collapsible Menu closed after refreshing the page

My issue is that the collapsible menu I have created does not remain closed when the page is refreshed. Upon reloading the page, the collapsible menu is always fully expanded, even if it was collapsed before the refresh. This creates a problem as there is ...

The ios browser environment is unable to retrieve the value during vuejs development

When using vuejs components to create a countdown component, everything seems normal in the pc and Android environments. However, in the iOS environment, there seems to be an issue with obtaining the real count calculation as it returns NaN. <templ ...

Tips for including an additional label on a data point within a scatter plot using the Highcharts JavaScript framework

Incorporating the Highcharts JavaScript library, I am visualizing float values by passing them from PHP to the JS code. In the image below, you can observe that upon hovering over each point, the corresponding axes values are displayed along with the text ...

From SketchUp to Canvas

I've been trying to figure out how to display a 3D model created in SketchUp on a web page. After discovering three.js and exporting the model to a .dae file for use with ColladaLoader, I still can't get it to appear on my canvas. (I'm using ...

Having issues with my custom AngularJS directive functionality

app.directive("myData", function() { return { templateUrl: '/my-data.html' }; }); my-data.html file code <tr ng-repeat="employee in employees"> <td>{{employee.id}}</td> <td>{{employee.name}}</t ...

Encountering difficulties with updating customer information in postgreSQL

I am attempting to perform CRUD operations using pg-promises and stored procedures in PostgreSQL. Here is my code: controller.js: const db = require("./../index.js"); exports.getAllData = async (req, res, next) => { try { const data = ...

PHP unable to display HTML form element using its designated ID attribute

I've been experiencing some difficulties with PHP echoing a label element that contains an ID attribute within an HTML form. My intention was to utilize the ID attribute in order to avoid having to modify the JS code to use the name attribute instead. ...

Use YUI to parse JSON data enclosed in square brackets and curly braces within a packet

Recently, I have been diving into the world of JSON, JavaScript, and YUI while working on a homework assignment. The JSON packet I am dealing with has the following structure: [{"id":"1234", "name":"some description","description":"url":"www.sd.com"}, {sa ...