Can't access object property, even though it shows up in a console log

Question

Below, you can see the output from these two logs. The first clearly shows the full object with the property I\'m trying to access, but on the very next line of code, I can\

Answer 1

I've had similar issue, hope the following solution helps someone.
You can use setTimeout function as some guys here suggesting, but you never know how exactly long does your browser need to get your object defined.

Out of that I'd suggest using setInterval function instead. It will wait until your object config.col_id_3 gets defined and then fire your next code part that requires your specific object properties.

window.addEventListener('load', function(){

    var fileInterval = setInterval(function() {
        if (typeof config.col_id_3 !== 'undefined') {

            // do your stuff here

            clearInterval(fileInterval); // clear interval
        }
    }, 100); // check every 100ms

});

Answer 2

The output of console.log(anObject) is misleading; the state of the object displayed is only resolved when you expand the Object tree displayed in the console, by clicking on >. It is not the state of the object when you console.log'd the object.

Instead, try console.log(Object.keys(config)), or even console.log(JSON.stringify(config)) and you will see the keys, or the state of the object at the time you called console.log.

You will (usually) find the keys are being added after your console.log call.

Answer 3

Check whether you had applied any filters in the console. It happens to me in chrome console.

Answer 4

I also had this frustrating problem, I tried the setTimeout() and the JSON.stringify and JSON.parse solutions even if I knew it wouldn't work as I think they're mostly JSON or Promise related problems, sure enough it didn't work. In my case though, I didn't notice immediately that it was a silly mistake. I was actually accessing a property name with a different casing. It's something like this:

const wrongPropName = "SomeProperty"; // upper case "S"
const correctPropName = "someProperty"; // lower case "s"
const object = { someProperty: "hello world!" };

console.log('Accessing "SomeProperty":', object[wrongPropName]);
console.log('Accessing "someProperty":', object[correctPropName])

It took me a while to notice as the property names in my case can have either all lower case or some having mixed case. It turned out that a function in my web application has something that makes a mess of my property names (it has a .toLowerCase() next to the generated key names

Answer 5

I had a similar issue or maybe just related.

For my case I was accessing properties of an object but one was undefined. I found the problem was a white-space in the server side code while creating the key,val of the object.

My approach was as follows...

After removing the white-space from the server-side code creating the object, I could now access the property as below...

This might not be the issue with the case of the subject question but was for my case and may be so for some one else. Hope it helps.

Answer 6

First thing check the type like below:

console.log(typeof config);

If the command above prints object then it is very easy you just use the bracket notation. Bracket notation can be quite useful if you want to search for a property’s values dynamically.

Execute the command below:

console.log(config[col_id_3]);

If it a string you need to parse in object first. To do that you need to execute the command below:

var object = JSON.parse(config);

And after that use bracket notation to access the property like below:

console.log(object[col_id_3]);