How can I access nested objects in 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.

Possible duplicate of [Convert JavaScript string in dot notation into an object reference](https://stackoverflow.com/questions/6393943/convert-javascript-string-in-dot-notation-into-an-object-reference) — Reactgular, Sep 20 '19 at 01:28
@Reactgular Nay. Something is totally different because none of the answers, no matter how much I tried, don't work. There's something in disarray here. — coolpasta, Sep 20 '19 at 01:28
If you're stuck, then try using `dot-prop`. I've used it many times. https://www.npmjs.com/package/dot-prop — Reactgular, Sep 20 '19 at 01:29
`dot-prop` works correctly. So you're using it wrong or the path value is really `undefined` ;) — Reactgular, Sep 20 '19 at 01:37
@Reactgular But how can it be since I literally did the same thing in the console, yet in my code it doesn't work? How can I even starte debugging if the same code works in the console but not in my code? — coolpasta, Sep 20 '19 at 01:39
I honestly can't understand the details of your question. Can you update it with a property working example that reproduces the `undefined` result. — Reactgular, Sep 20 '19 at 01:41
You are iterating all prototype properties. See here: https://stackoverflow.com/questions/12735778/for-in-and-hasownproperty — Reactgular, Sep 20 '19 at 02:01
@Reactgular My issue was that these calls were inside a Promise from above that I didn't return and so, while the browser saw the value as being there (since it was the end of the execution), my code didn't. — coolpasta, Sep 20 '19 at 02:35

score 1 · Accepted Answer · answered Sep 20 '19 at 01:14

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)
}

answered Sep 20 '19 at 01:14

Joven28

769
3
12

Same thing. Returns `undefined`. – coolpasta Sep 20 '19 at 01:18
of course the variable you're using is not existing or undefined and it's trying to access a property of non-object. Kindly check your code again. – Joven28 Sep 20 '19 at 01:20
This is my structure: https://prnt.sc/p8hd5s . Not sure what I'm doing wrong, am honestly at the end of my powers. A simple thing like accessing props in an object turns out to be hell in JS and I have no idea why. – coolpasta Sep 20 '19 at 01:22
The same thing that I wrote in my script works in the console: http://prntscr.com/p8hdss – coolpasta Sep 20 '19 at 01:24
Thank you for your answer. It is correct. My issue was that I didn't properly resolve a Promise from up the chain and so, it didn't resolve at the time my script was accessing `.state`. Sorry for the trouble. – coolpasta Sep 20 '19 at 02:36
^Nice. No problem :) – Joven28 Sep 20 '19 at 02:42

score 0 · Answer 2 · edited Sep 20 '19 at 06:39

0

Try this code:

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

edited Sep 20 '19 at 06:39

Mike Doe

16,349
11
65
88

answered Sep 20 '19 at 01:17

lukeskywaka

231
1
6

ctaleck · Answer 3 · 2019-09-20T02:34:20.227

0

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);

edited Sep 20 '19 at 02:34

answered Sep 20 '19 at 02:26

ctaleck

1,658
11
20

I am uncertain of the purpose of the for-loop, so I left it in as a demonstration of copying all the object's properties. Otherwise, you can access your property directly as shown by the last `log` – ctaleck Sep 20 '19 at 02:29
Thank you for your answer. It is correct. My issue was that I didn't properly resolve a Promise from up the chain and so, it didn't resolve at the time my script was accessing `.state`. Sorry for the trouble, the question can be closed as my issue turned out to be completely something else. – coolpasta Sep 20 '19 at 02:37

How can I access nested objects in Javascript?

3 Answers3