JavaScript JavaScript: Accessing Nested Objects using document.getElementByID functionality

[johnhk631]

Hey ya'll

Hoping to get some light shed on this JavaScript. (Please forgive any terminology errors on my part, still trying to get a grasp of it)

I have the following code that works:

const myParams = {

   param1: "widget1",

   param2: "widget2",

   myParams2: {

       param4: "widget4",

       param5: "widget5",

       param6: "widget6"

   }

}


let p1 = "myParams2";

let p2 = "param4";

document.getElementById("Params").innerHTML = myParams[p1][p2];

however if I add:

let p3 = “param5”

and add [p3] to the end of the document.getElementById statement, the browser returns “undefined”. If I add + [p3] instead, the return is “widget4param5”

If I drop the let objects and use (dot notation) it works:

document.getElementById("Params").innerHTML = myParams.myParams2.param4 + myParams.myParams2.param5;

My question is why does this occur? I'm guessing the reason for the param5 issue with let is because its seeing the value as a string after adding the +, however adding + [p1][p3] doesn't work either (back to the “undefined”). I “wuda thunk” that adding + [p1][p3] would be the same as adding + myParams.myParams2.param5 but it doesn't seem to be the case.

The learning material I am using just gives examples of how to do it but not the “Why it works”. According to the documentation they are providing, there are 4 ways to access the nested objects but one seems to work with multiples and another doesn't. I've tried searching nested objects but nothing is really explaining the why.

Leaves me with 2 options:
1) I am just misreading something or
2) I'm too much of a rock to understand something basic.

Anyway, thanks for taking a look and keeping the laughter at a low roar.

 

[Johna]

Hey there,

myParams[p1][p2] is the same as myParams.myParams2.param4, which means myParams[p1][p2][p3] will be the same as myParams.myParams2.param4.param5, which looking at the object, does not exist (undefined).

Then when you do myParams[p1][p2] + [p3], what your doing is concatenating the value of myParams.myParams2.param4 with the value of the variable p3.
Notice how because you didn't specify the object before [p3], it just returned the value of the variable p3? But when you did myParams.myParams2.param4 + myParams.myParams2.param5 it worked because you added myParams.myParams2 before param5.
You have to do the same when using the square bracket notation.

The below code should give the output you're expecting.

document.getElementById("Params").innerHTML = myParams[p1][p2] + myParams[p1][p3];

 

[johnhk631]

myParams

Thank you for that explanation.

Not sure why I didn't try the myParams in front of [p1][p3] before but I'm guessing in my mind I was thinking I had already specified the myParams and was working within the second object. That's what I get for not walking away from it for a bit and coming back with fresh eyes.

Regardless, your explanation has helped a lot with my understanding of objects and orders.

 

[nicholascn]

Hey johnhk631
!

Great question! It looks like you're dealing with JavaScript object property access and string concatenation. Let’s break down why you’re seeing the behavior you described.

Understanding Your Code

You have an object myParams with nested properties and you’re trying to access these properties dynamically using variable names. Here's your initial setup:

const myParams = {
   param1: "widget1",
   param2: "widget2",
   myParams2: {
       param4: "widget4",
       param5: "widget5",
       param6: "widget6"
   }
};

let p1 = "myParams2";
let p2 = "param4";

// This works
document.getElementById("Params").innerHTML = myParams[p1][p2];

Adding let p3 = "param5";

When you add another variable p3 and try to use it in your expression, here's what's happening:

1. String Concatenation Issue:

javascript
   let p3 = "param5";
   document.getElementById("Params").innerHTML = myParams[p1][p2] + [p3];

- myParams[p1][p2] evaluates to "widget4".
- [p3] evaluates to ["param5"] (which is an array, not a string).
- When you use the + operator with a string and an array, JavaScript converts the array to a string ("param5") and concatenates it. Hence, the result is "widget4param5".

2. Accessing Properties Dynamically:

javascript
   document.getElementById("Params").innerHTML = myParams[p1][p2 + p3];

- Here, p2 + p3 results in "param4param5", which is not a valid property in myParams[p1]. This is why you get undefined.

Correct Way to Use Dynamic Property Names

If you want to access param5 dynamically after param4, you need to access it correctly like this:

document.getElementById("Params").innerHTML = myParams[p1][p2] + myParams[p1][p3];

• myParams[p1][p2] evaluates to "widget4".
• myParams[p1][p3] evaluates to "widget5".
• Concatenating these results in "widget4widget5".

Summary

Concatenation Issue: Using + with an array converts the array to a string and concatenates it with the previous string.
Dynamic Property Access: To concatenate multiple properties, ensure each property is accessed correctly and concatenated.

Feel free to ask more questions if you have them! Happy coding!