How to use get the value from the nth child key of the object by using variable?

Question

The question is similar to this: How do I interpolate a variable as a key in a JavaScript object?

However, I have a difficult on using variables on nth keys:

I had a object, which is:

var object = {};
object.foo = "foo";
object.foo.bar = "bar";
object.foo.bar.alice = "alice";
object.foo.bar.alice.bob = "bob";

I am able to get the value (foo) for object.foo by using the variable object["foo"]

But I cannot find out a way to access to object.foo.bar value.

I tried object["foo"]["bar"], but it does not work.

In addition to my question, how can I get the value for

object.foo.bar.alice
object.foo.bar.alice.bob

By using variable as well?

Thanks.

Answer 1

You need an object for foo, because foo is a primitive type.

var object = {};
object.foo = "foo";
object.foo.bar = "bar"; // does not work!

This works

var object = {};
object.foo = {};
object.foo.bar = "bar"; // work!

Answer 2

When you do

var object = {};
object.foo = "foo";

You define the property as string and it won't store the keys since it is a string literal not a string object.

you need to try

var object = {};
object.foo = new String("foo");

Now it can store more properties in object.foo.

var object = {};
object.foo = new String( "foo" );
object.foo.bar = new String( "bar" );
object.foo.bar.alice = new String( "alice" );
object.foo.bar.alice.bob = new String( "bob" );

console.log( object );

Answer 3

you need to assign as a object {key:value,key:value}

object.foo = {0:"foo",bar:{}};
object.foo.bar = {0:"bar",alice:{}};
object.foo.bar.alice = {0:"alice",bob:{}};
object.foo.bar.alice.bob = "bob";
console.log(object.foo.bar.alice);
console.log(object.foo.bar.alice.bob);

Answer 4

You can develop a simple function to get the nested objects and their keys dynamically. Such as the following. A similar approach would be sufficient for the set version as well.

Object.prototype.getNestedValue = function(...a) {
  return a.length > 1 ? (this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];
};

var arr = [{fox: [{turn:[857, 432]}]}, {sax: [{pana:[777, 987]}]}, {ton: [{joni:[123, 567]}]}, {piu: [{burn:[666, 37]}]}, {sia: [{foxy:[404, 696]}]}],
  myObj = {foo: {bar: {alice: {bob: "bob"}}}};

document.write("<pre>" + JSON.stringify(arr.getNestedValue(3,"piu",0,"burn",1),null,2) + "</pre>");
document.write("<pre>" + JSON.stringify(arr.getNestedValue(3,"piu",0,"burn"),null,2) + "</pre>");
document.write("<pre>" + JSON.stringify(myObj.getNestedValue("foo","bar","alice","bob"),null,2) + "</pre>");

Keep in mind that you can set your nested properties in an array in the order of appearance and then call like myDeeplyNestedObj.getNestedValue(...propsArray)