How to Call a Nested Object in JavaScript Dynamically?

Question

How to Call a Nested Object in JavaScript Dynamically?

var myObj = {
    bar_foo : "test",
    bar : {
       foo : "hi there";
         },
    foo : {
          bar : {
                 foo: "and here we go!"
                 }
           }
     }

How can we achieve the following:

var arr = [["bar", "foo"], ["foo", "bar", "foo"]];

to produce these results:

myObj["bar"]["foo"];
myObj["foo"]["bar"]["foo"];

The array arr may vary in length, allowing it to explore the object fully.

We are aware that we can access an object's value dynamically as shown below:

var normally = myObj["bar_foo"];

where normally would be equal to "test"

However, this method assumes a predetermined depth for traversing the object.

I am attempting to retrieve an object's value by providing an array such as:

["bar", "foo"]

This is essentially equivalent to:

myObj["bar"]["foo"];

The objective behind this approach is to create a new object based on specific values extracted from arr.

Consequently, the final outcome would be:

arr_new = myObj.someMethod(arr);

where arr_new represents:

arr_new : ["hi there", "and here we go!"];

Hopefully, this explanation provides clarity on the matter.

javascript object dynamic return

Answer 1

Answer №1

If you are working with Underscore (or have access to native JS map and reduce), consider implementing the following approach:

var myObject = {
  bar: {
    foo: "hello there"
  },
  foo: {
    bar: {
      foo: "let's get started!"
    }
  }
};

var array = [
  ["bar", "foo"],
  ["foo", "bar", "foo"]
];

function retrieveDeepProperty(arr, obj) {
  return _.reduce(arr, function(prevVal, currentVal) {
    return prevVal[currentVal];
  }, obj);
}

var deepProperties = _.map(array, function(nestedArray) {
  return retrieveDeepProperty(nestedArray, myObject);
});

console.log(deepProperties); // => ["hello there", "let's get started!"]

While there could be a more refined solution available, this serves as a quick workaround that achieves the desired outcome! :P

Answer 2

If you are working with Underscore (or have access to native JS map and reduce), consider implementing the following approach:

var myObject = {
  bar: {
    foo: "hello there"
  },
  foo: {
    bar: {
      foo: "let's get started!"
    }
  }
};

var array = [
  ["bar", "foo"],
  ["foo", "bar", "foo"]
];

function retrieveDeepProperty(arr, obj) {
  return _.reduce(arr, function(prevVal, currentVal) {
    return prevVal[currentVal];
  }, obj);
}

var deepProperties = _.map(array, function(nestedArray) {
  return retrieveDeepProperty(nestedArray, myObject);
});

console.log(deepProperties); // => ["hello there", "let's get started!"]

While there could be a more refined solution available, this serves as a quick workaround that achieves the desired outcome! :P

Answer 3

Answer №2

CustomFunction.prototype.newMethod = function (arr) {

  function customFunction (obj, array){
    var res = obj[array.splice(0, 1)[0]];
    if (typeof res === 'object' && array.length) {
      return customFunction(res, array);
    }else{
      return res;
    }
  }
  var resultArray = [];
  for (var index = 0; index < arr.length; index++) {
    resultArray.push(customFunction(this, arr[index]));
  }
  return resultArray;
};

JSBin >> Demo

Answer 4

CustomFunction.prototype.newMethod = function (arr) {

  function customFunction (obj, array){
    var res = obj[array.splice(0, 1)[0]];
    if (typeof res === 'object' && array.length) {
      return customFunction(res, array);
    }else{
      return res;
    }
  }
  var resultArray = [];
  for (var index = 0; index < arr.length; index++) {
    resultArray.push(customFunction(this, arr[index]));
  }
  return resultArray;
};

JSBin >> Demo

Answer 5

Answer №3

Could this be the solution you’ve been searching for?

function extractObjValue( arr, obj){
    var temp=obj;
    for(i=0;i<arr.length;i++){
        temp=temp[arr[i]];
    }
    return temp
}

alert( extractObjValue( arr[1],myObject)); // "and voilà!"

If creating an array of values is what you need:

var outcome=arr.map(function(subArray){
   return  extractObjValue(subArray,myObject);
})

Check out the DEMO

Answer 6

Could this be the solution you’ve been searching for?

function extractObjValue( arr, obj){
    var temp=obj;
    for(i=0;i<arr.length;i++){
        temp=temp[arr[i]];
    }
    return temp
}

alert( extractObjValue( arr[1],myObject)); // "and voilà!"

If creating an array of values is what you need:

var outcome=arr.map(function(subArray){
   return  extractObjValue(subArray,myObject);
})

Check out the DEMO

Answer 7

Answer №4

Here is a fiddle I created showcasing a potential solution, all without the use of libraries:

http://jsfiddle.net/EfrainReyes/6s9HY/2/

function extractData(object, array) {
    var results = [];

    for (var i = 0; i < array.length; i++) {
        var tempObj = object;

        for (var j = 0; j < array[i].length; j++) {
            tempObj = tempObj[array[i][j]];
        }

        results.push(tempObj);
    }
    return results;
};

It's important to note that this function assumes valid parameters are passed in, however, you can always add validation checks as needed.

Answer 8

Here is a fiddle I created showcasing a potential solution, all without the use of libraries:

http://jsfiddle.net/EfrainReyes/6s9HY/2/

function extractData(object, array) {
    var results = [];

    for (var i = 0; i < array.length; i++) {
        var tempObj = object;

        for (var j = 0; j < array[i].length; j++) {
            tempObj = tempObj[array[i][j]];
        }

        results.push(tempObj);
    }
    return results;
};

It's important to note that this function assumes valid parameters are passed in, however, you can always add validation checks as needed.

How to Call a Nested Object in JavaScript Dynamically?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

"X-Requested-With" header not being included in XMLHttpRequest request

What is the most effective method for preserving RichText (WYSIWYG output)?

Tips for accessing raw POST data in PHP using $_SERVER

Is there a way to invoke a jQuery function from an ASP.NET environment?

Launching my initial React application

Exploring the intricacies of debugging async/await in Node.js with the help of

Can we trust the accuracy of the official type definition for JSON.stringify?

Discover the secret to incorporating concealed text in WordPress with a hidden div through the power of JavaScript

What is the best way to transfer data between different states in ReactJS components?

Attempting to store an array of JSON objects in the state, and then utilizing the `map` method to render

Exploring the process of iterating through arrays within an object in vue.js using the v-for directive

The content is not displayed in the d3 visualization

Can a for loop be implemented within a mongoose schema method?

Managing media file transfers using multer and mongodb in a Node.js environment

Can a web application be developed utilizing JavaScript to access the torch feature in Safari?

Initiate a POST ajax request to retrieve the file.Let's

Include the JS file after finishing the control processing

retrieve the value of a specific key using JSON stringify

Pressing the button results in no action

A sleek and streamlined scrollspy that dynamically updates the active class exclusively for anchor tags