Javascript - 对象：如何访问嵌套对象？

Question

I went through every single question from SO, as well as Google but to no avail, this is why I'm creating a duplicate because clearly, my case is different since none of the answers work.

First of all, I don't understand why I can't just simply access an object within an object simply by using the . notation as such: myObject.level1.level2.level3whichIsAObject , it returns undefined . My structure is:

myMainOjbect = { 
    attachment: {
        handle: 'attachment',
        slug: 'Images',
        state: {
            success: true,
            data: {
                activated: false,
                info: {
                    demo: 'demo-1',
                    component: 'attachment',
                },
                success: true,
            }
        }
    }
},
..

First, I loop through the high-level:

for(let key in myMainOjbect) {
    const objectData = objectData[key];
}

Which shows me everything that's inside the attachment slug. But if I want to get objectData.state , suddenly, it's returned as undefiend .

What's going on here? Why can't I just simply access things and second, how can I actually do it?

The weirdest part is if I store my original object as a global in the console and I do the same thing I did in my code:

...it works.

Here's the error I'm (not) getting:

 const myObject = { attachment: { handle: 'attachment', slug: 'Images', state: { success: true, data: { activated: false, info: { demo: 'demo-1', component: 'attachment', }, success: true, } } }, widgets: { handle: 'widgets', slug: 'Widgets', state: { success: true, data: { activated: false, info: { demo: 'demo-1', component: 'widgets', }, success: true, } } }, }; for (const key in myObject) { console.log(myObject[key].state); }

In this demo, it works, except on my code, which is 1:1 copy...it doesn't.

Answer 1

You're accessing the variable which is not coming from the loop.

You need to do it like this.

 const myMainOjbect = { attachment: { handle: 'attachment', slug: 'Images', state: { success: true, data: { activated: false, info: { demo: 'demo-1', component: 'attachment', }, success: true, } } } }; for (const key in myMainOjbect) { console.log(myMainOjbect[key].state) }

Answer 2

Try this code:

for (let key in myMainOjbect) {
    const objectData = myMainOjbect[key];
    console.log(objectData.state)
}

Answer 3

const objectData = objectData[key]; is not the same as console.log(myMainOjbect[key].state)

I don't understand why I can't just simply access an object within an object

You can. See the snippet below for an example:

 const myMainOjbect = { attachment: { handle: 'attachment', slug: 'Images', state: { success: true, data: { activated: false, info: { demo: 'demo-1', component: 'attachment', }, success: true, } } } }; const objectData = {}; for (const key in myMainOjbect) { objectData[key] = myMainOjbect[key]; } console.log(objectData); console.log(objectData.attachment.state); const myState = myMainOjbect.attachment.state; console.log(myState);