Dynamically access nested objects by utilizing an array of strings as a pathway

Question

Dynamically access nested objects by utilizing an array of strings as a pathway

Struggling to find a solution for accessing nested object properties dynamically?

The property path needs to be represented as an array of strings.

For example, to retrieve the label, use ['type', 'label']

I'm at a roadblock with this issue, any suggestions?

Edit snippet:

Demo

var parent = {
      type: {
        id: "2",
        label: "3",
      }
    };

    function getNestedLabel(ids){
      if (ids.length === 1) {
        return parent[ids[0]];
      }
      var result = parent;
      for (let i = 0; i < ids.length; i++) {
        result = result[ids[i]];
      }
      return result;
    }

    console.log(getNestedLabel(["type", "label"]));

javascript angular typescript

Answer 1

Answer №1

An efficient method to access nested properties in an object is by iterating through the keyArray and traversing the object using the keys from keyArray.

function getNestedObject(keyArr) {
    var temp = parent; //assuming the function has access to the parent object
    keyArr.forEach(function (key) {
        temp = temp[key];
    });
    return temp;
}

Demo

var parent = {
  type: {
    id: "2",
    label: "3",
  }
};

function getNestedObject(keyArr) {
    var temp = parent; //assuming the function has access to the parent object
    keyArr.forEach(function (key) {
        temp = temp[key];
    });
    return temp;
}

console.log(getNestedObject(["type", "label"]));

Answer 2

An efficient method to access nested properties in an object is by iterating through the keyArray and traversing the object using the keys from keyArray.

function getNestedObject(keyArr) {
    var temp = parent; //assuming the function has access to the parent object
    keyArr.forEach(function (key) {
        temp = temp[key];
    });
    return temp;
}

Demo

var parent = {
  type: {
    id: "2",
    label: "3",
  }
};

function getNestedObject(keyArr) {
    var temp = parent; //assuming the function has access to the parent object
    keyArr.forEach(function (key) {
        temp = temp[key];
    });
    return temp;
}

console.log(getNestedObject(["type", "label"]));

Answer 3

Answer №2

Consider the following:

retrieveNestedValue(parent: any, identifier:string[]): string{

    let subItem = {...parent};
    let output: string;
    for(let j=0; j<identifier.length; j++){
        if( j !== identifier.length-1 ){
            subItem = subItem[identifier[j]]
        }
        else{
            output = subItem[identifier[j]]
        }
    }
    return output;
}

Answer 4

Consider the following:

retrieveNestedValue(parent: any, identifier:string[]): string{

    let subItem = {...parent};
    let output: string;
    for(let j=0; j<identifier.length; j++){
        if( j !== identifier.length-1 ){
            subItem = subItem[identifier[j]]
        }
        else{
            output = subItem[identifier[j]]
        }
    }
    return output;
}

Dynamically access nested objects by utilizing an array of strings as a pathway

Answer №1

Answer №2

Similar questions

Troubleshooting why passing $var within @{{ }} in Vue.js + Laravel is not functioning as expected

JavaScript vanilla can be difficult to grasp, especially when it comes to

Messages are not being received despite no errors occurring in the PHP form

Substitute the comma with a space

Determining the sequence of events for @HostListener event within an Angular directive

Divide HTML elements every two words

Consumer using ActiveMQ-Stomp is not receiving any messages

Tips for assigning information from a react hook within a function or event

What is causing the geolocation heading to remain "null" on Android devices when using Chrome?

Showcase images from a MongoDb database in an HTML document

"Utilizing Typescript and React to set a property's value based on another prop: A step-by

Looking to set the "min" attribute for an input type="date" in HTML5 with a specific date format preselected?

Tips for running a dry default with Angular CLI

Ensure that all divs have the same height and padding when resizing

Unable to choose multiple options within a selection field

Need help implementing the disableGutters property on MTableToolbar?

Closing iframe in Angular 4 after redirection

The issue of variable stagnation in Firefox content script while utilizing self.port.on

Challenges with Media Queries post Integration of MUI Library in React

Angular JS is failing to update views when passing dynamic IDs