Can’t access object property, even though it exists. Returns undefined

Can’t access object property, even though it exists. Returns undefined

This is baffling me. I don’t know how else to explain this, but here is what my debug code looks like. Below it you can see the output from these two logs. The first clearly shows the full JavaScript object with the property I’m trying to access, but the very next line code I can’t access it with config.col_id_3 (see the “undefined” in the screenshot?). Can anyone explain this? I can get access to every other property except field_id_4 as well.
console.log(config);
console.log(config.col_id_3);

This is what these console.log()s print in Console

Solutions/Answers:

Solution 1:

The output of console.log(anObject) is misleading; the state of the object displayed is only resolved when you expand the > in the console. 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.

Solution 2:

I’ve just had this issue with a document loaded from MongoDB using Mongoose.

When running console.log() on the whole object, all the document fields (as stored in the db) would show up. However some individual property accessors would return undefined, when others (including _id) worked fine.

Turned out that property accessors only works for those fields specified in my mongoose.Schema(...) definition, whereas console.log() and JSON.stringify() returns all fields stored in the db.

Solution (if you’re using Mongoose): make sure all your db fields are defined in mongoose.Schema(...).

Solution 3:

Check if inside the object there’s an array of objects. I had a similar issue with a JSON:

    "terms": {
        "category": [
            {
                "ID": 4,
                "name": "Cirugia",
                "slug": "cirugia",
                "description": "",
                "taxonomy": "category",
                "parent": null,
                "count": 68,
                "link": "http://distritocuatro.mx/enarm/category/cirugia/"
            }
        ]
    }

I tried to access the ‘name’ key from ‘category’ and I got the undefined error, because I was using:

var_name = obj_array.terms.category.name

Then I realised it has got square brackets, that means that it has an array of objects inside the category key, because it can have more than one category object. So, in order to get the ‘name’ key I used this:

var_name = obj_array.terms.category[0].name

And That does the trick.

Maybe it’s too late for this answer, but I hope someone with the same problem will find this as I did before finding the Solution 🙂

Solution 4:

The property you’re trying to access might not exist yet. Console.log works because it executes after a small delay, but that isn’t the case for the rest of your code. Try this:

var a = config.col_id_3;    //undefined

setTimeout(function()
{
    var a = config.col_id_3;    //voila!

}, 100);

Solution 5:

I had the same issue. Solution for me was using the stringified output as input to parsing the JSON. this worked for me. hope its useful to you

var x =JSON.parse(JSON.stringify(obj));
console.log(x.property_actually_now_defined);

Solution 6:

In my case I was passing an object to a promise, within the promise I was adding more key/values to the object and when it was done the promise returned the object.

However, a slight over look on my part, the promise was returning the object before it was fully finished…thus the rest of my code was trying to process the updated object and the data wasn’t yet there. But like above, in the console, I saw the object fully updated but wasn’t able to access the keys – they were coming back undefined. Until I saw this:

console.log(obj) ;
console.log(obj.newKey1) ;

// returned in console
> Object { origKey1: "blah", origKey2: "blah blah"} [i]
    origKey1: "blah"
    origKey2: "blah blah"
    newKey1: "this info"
    newKey2: "that info"
    newKey3: " more info"
> *undefined*

The [i] is a little icon, when I hovered over it it said Object value at left was snapshotted when logged, value below was evaluated just now. Thats when it occurred to me that my object was being evaluated before the promise had fully updated it.