Related
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'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 lines print in Console
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.
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(...).
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 :)
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);
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);
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.
I just encountered this issue with objects generated by csv-parser from a CSV file that was generated by MS Excel. I was able to access all properties except the first property - but it would show up ok if I wrote the whole object using console.log.
Turned out that the UTF-8 CSV format inserts 3 bytes (ef bb bf) at the start corresponding to an invisible character - which were being included as part of the first property header by csv-parser. Solution was to re-generate the CSV using the non-UTF option and this eliminated the invisible character.
I struggled with this issue today, and thought I'll leave a reply with my solution.
I was fetching a data object via ajax, something like this:
{"constants": {"value1":"x","value2":"y"},"i18n" {"data1":"x", "data2":"y"}}
Let's say this object is in a variable called data. Whenever I referenced data.i18n I got undefined.
console.log(data) showed the object as expected
console.log(Object.keys(data)) said ["constants","i18n"] as expected
Renaming i18n to inter didn't change anything
I even tried to switch the data to make "i18n" the first object
Moved code around to make absolutely sure the object was completely set and there was no problem with the ajax promise.
Nothing helped... Then on the server side I wrote the data to the php log, and it revealed this:
{"constants": {"value1":"x","value2":"y"},"\u045618n" {"data1":"x", "data2":"y"}}
The "i" in the index key was actually a u0456 (cyrillic i). This was not visible in my php editor or the browser console log. Only the php log revealed this... That was a tricky one...
My data was just json data string . (This variable was stored as json string in the session).
console.log(json_string_object)
-> returns just the representation of this string and there is no way to make difference whether is string or object.
So to make it work I just needed to convert it back to real object:
object = JSON.parse(json_string_object);
In 2018 Mozilla warns us in the Mozilla Docs here!
I quote "Logging Objects":
Don't use console.log(obj);,
use console.log(JSON.parse(JSON.stringify(obj)));.
This way you are sure you are seeing the value of obj at the moment
you log it.
If this is an issue occurring when working with Mongoose, the following may happen:
console.log(object)
returns everything, including the desired key.
console.log(object.key)
returns undefined.
If that is happening, it means that the key is missing from the Mongoose Schema. Adding it in will resolve the issue.
For me it turned out to be a Mongoose-related problem.
I was looping over objects that I got from a Mongo query. I just had to remove:
items = await Model.find()
And replace it by:
items = await Model.find().lean()
This might help somebody as I had a similar issue in which the JSON.parse() was returning an object that I could print on the console.log() but I couldn't acccess the specific fields and none of the above solution worked for me. Like using the combination of JSON.parse() with JSON.stringify().
var jsonObj = JSON.parse(JSON.stringify(responseText))
// where responseText is a JSON String returned by the server.
console.log(jsonObj) ///Was printing the object correctly
console.log(jsonObj.Body) /// Was printing Undefined
I ended up solving the problem by using a different parser provided by ExtJs Ext.decode();
var jsonObj = Ext.decode(responseText)
console.log(jsonObj.Body) //Worked...
I had the same issue and no solution above worked for me and it sort of felt like guess work thereafter. However, wrapping my code which creates the object in a setTimeout function did the trick for me.
setTimeout(function() {
var myObj = xyz; //some code for creation of complex object like above
console.log(myObj); // this works
console.log(myObj.propertyName); // this works too
});
I've just had the same issue with a document loaded from MongoDB using Mongoose.
Turned out that i'm using the property find() to return just one object, so i changed find() to findOne() and everything worked for me.
Solution (if you're using Mongoose): Make sure to return one object only, so you can parse its object.id or it will be treated as an array so you need to acces it like that object[0].id.
In My case, it just happens to be that even though i receive the data in the format of a model like myMethod(data:MyModelClass) object till the received object was of type string.
Which is y in console.log(data) i get the content.
Solution is just to parse the JSON(in my case)
const model:MyMOdelClass=JSON.parse(data);
Thought may be usefull.
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
});
if you're using TYPESCRIPT and/or ANGULAR, it could be this!
.then((res: any) => res.json())
setting the response type to any fixed this issue for me, I couldn't access properties on the response until i set res: any
see this question Property '_body' does not exist on type 'Response'
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.
I just encountered this issue as well, and long story short my API was returning a string type and not JSON. So it looked exactly the same when you printed it to the log however whenever I tried to access the properties it gave me an undefined error.
API Code:
var response = JsonConvert.DeserializeObject<StatusResult>(string Of object);
return Json(response);
previously I was just returning:
return Json(string Of object);
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]);
I had an issue like this, and found the solution was to do with Underscore.js. My initial logging made no sense:
console.log(JSON.stringify(obj, null, 2));
> {
> "code": "foo"
> }
console.log(obj.code);
> undefined
I found the solution by also looking at the keys of the object:
console.log(JSON.stringify(Object.keys(obj)));
> ["_wrapped","_chain"]
This lead me to realise that obj was actually an Underscore.js wrapper around an object, and the initial debugging was lying to me.
I had similar problem (when developing for SugarCRM), where I start with:
var leadBean = app.data.createBean('Leads', {id: this.model.attributes.parent_id});
// This should load object with attributes
leadBean.fetch();
// Here were my attributes filled in with proper values including name
console.log(leadBean);
// Printed "undefined"
console.log(leadBean.attributes.name);
Problem was in fetch(), its async call so I had to rewrite my code into:
var leadBean = app.data.createBean('Leads', {id: this.model.attributes.parent_id});
// This should load object with attributes
leadBean.fetch({
success: function (lead) {
// Printed my value correctly
console.log(lead.attributes.name);
}
});
Just in case this is helpful for someone, I had a similar problem, and it's because someone created an override for .toJSON in the object I was working with. So the object was something like:
{
foo: {
bar: "Hello"
baz: "World"
}
}
But .toJSON() was:
toJSON() {
return this.foo
}
So when I called JSON.stringify(myObject) it returned "{"bar": "Hello", "baz": "World"}". However, Object.keys(myObject) revealed the "foo".
I faced the same problem today. In my case the keys were nested, i.e key1.key2.
I split the keys using split() and then used the square bracket notation, which did work for me.
var data = {
key1: {
key2: "some value"
}
}
I split the keys and used it like this, data[key1][key2] which did the job for me.
I had the same issue today. Problem was caused by uglify-js. After I executed same non-uglified code problem was solved. Removing of
--mangle-props
from uglify-js was enough to have working uglified code.
Perhaps, the best practice is to use some prefix for properties that has to be mangled with regex rule for uglify-js.
Here is the source:
var data = JSON.parse( content);
...
this.pageIndex = parseInt(data.index);
this.pageTotal = parseInt(data.total);
this.pageLimit = parseInt(data.limit);
and here is how it was uglified:
var n = JSON.parse( t);
...
this._ = parseInt(n.index), this.g = parseInt(n.total), this.D = parseInt(n.C)
None of the JSON stringify/parse worked for me.
formValues.myKey: undefined
formValues.myKey with timeout: content
I wanted the value of formValues.myKey and what did the trick was a setTimeout 0 like in the example below. Hope it helps.
console.log('formValues.myKey: ',formValues.myKey);
setTimeout( () => {
console.log('formValues.myKey with timeout: ', formValues.myKey);
}, 0 );
I had a similar issue today in React. Eventually realised that the problem was being caused by the state not being set yet. I was calling user.user.name and although it was showing up in the console, I couldn't seem to access it in my component till I included a check to check if user.user was set and then calling user.user.name.
Check whether you had applied any filters in the console. It happens to me in chrome console.
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 🤣).
So, lesson learned, check property name casing more properly.
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'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 lines print in Console
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.
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(...).
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 :)
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);
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);
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.
I just encountered this issue with objects generated by csv-parser from a CSV file that was generated by MS Excel. I was able to access all properties except the first property - but it would show up ok if I wrote the whole object using console.log.
Turned out that the UTF-8 CSV format inserts 3 bytes (ef bb bf) at the start corresponding to an invisible character - which were being included as part of the first property header by csv-parser. Solution was to re-generate the CSV using the non-UTF option and this eliminated the invisible character.
I struggled with this issue today, and thought I'll leave a reply with my solution.
I was fetching a data object via ajax, something like this:
{"constants": {"value1":"x","value2":"y"},"i18n" {"data1":"x", "data2":"y"}}
Let's say this object is in a variable called data. Whenever I referenced data.i18n I got undefined.
console.log(data) showed the object as expected
console.log(Object.keys(data)) said ["constants","i18n"] as expected
Renaming i18n to inter didn't change anything
I even tried to switch the data to make "i18n" the first object
Moved code around to make absolutely sure the object was completely set and there was no problem with the ajax promise.
Nothing helped... Then on the server side I wrote the data to the php log, and it revealed this:
{"constants": {"value1":"x","value2":"y"},"\u045618n" {"data1":"x", "data2":"y"}}
The "i" in the index key was actually a u0456 (cyrillic i). This was not visible in my php editor or the browser console log. Only the php log revealed this... That was a tricky one...
My data was just json data string . (This variable was stored as json string in the session).
console.log(json_string_object)
-> returns just the representation of this string and there is no way to make difference whether is string or object.
So to make it work I just needed to convert it back to real object:
object = JSON.parse(json_string_object);
In 2018 Mozilla warns us in the Mozilla Docs here!
I quote "Logging Objects":
Don't use console.log(obj);,
use console.log(JSON.parse(JSON.stringify(obj)));.
This way you are sure you are seeing the value of obj at the moment
you log it.
If this is an issue occurring when working with Mongoose, the following may happen:
console.log(object)
returns everything, including the desired key.
console.log(object.key)
returns undefined.
If that is happening, it means that the key is missing from the Mongoose Schema. Adding it in will resolve the issue.
For me it turned out to be a Mongoose-related problem.
I was looping over objects that I got from a Mongo query. I just had to remove:
items = await Model.find()
And replace it by:
items = await Model.find().lean()
This might help somebody as I had a similar issue in which the JSON.parse() was returning an object that I could print on the console.log() but I couldn't acccess the specific fields and none of the above solution worked for me. Like using the combination of JSON.parse() with JSON.stringify().
var jsonObj = JSON.parse(JSON.stringify(responseText))
// where responseText is a JSON String returned by the server.
console.log(jsonObj) ///Was printing the object correctly
console.log(jsonObj.Body) /// Was printing Undefined
I ended up solving the problem by using a different parser provided by ExtJs Ext.decode();
var jsonObj = Ext.decode(responseText)
console.log(jsonObj.Body) //Worked...
I had the same issue and no solution above worked for me and it sort of felt like guess work thereafter. However, wrapping my code which creates the object in a setTimeout function did the trick for me.
setTimeout(function() {
var myObj = xyz; //some code for creation of complex object like above
console.log(myObj); // this works
console.log(myObj.propertyName); // this works too
});
I've just had the same issue with a document loaded from MongoDB using Mongoose.
Turned out that i'm using the property find() to return just one object, so i changed find() to findOne() and everything worked for me.
Solution (if you're using Mongoose): Make sure to return one object only, so you can parse its object.id or it will be treated as an array so you need to acces it like that object[0].id.
In My case, it just happens to be that even though i receive the data in the format of a model like myMethod(data:MyModelClass) object till the received object was of type string.
Which is y in console.log(data) i get the content.
Solution is just to parse the JSON(in my case)
const model:MyMOdelClass=JSON.parse(data);
Thought may be usefull.
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
});
if you're using TYPESCRIPT and/or ANGULAR, it could be this!
.then((res: any) => res.json())
setting the response type to any fixed this issue for me, I couldn't access properties on the response until i set res: any
see this question Property '_body' does not exist on type 'Response'
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.
I just encountered this issue as well, and long story short my API was returning a string type and not JSON. So it looked exactly the same when you printed it to the log however whenever I tried to access the properties it gave me an undefined error.
API Code:
var response = JsonConvert.DeserializeObject<StatusResult>(string Of object);
return Json(response);
previously I was just returning:
return Json(string Of object);
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]);
I had an issue like this, and found the solution was to do with Underscore.js. My initial logging made no sense:
console.log(JSON.stringify(obj, null, 2));
> {
> "code": "foo"
> }
console.log(obj.code);
> undefined
I found the solution by also looking at the keys of the object:
console.log(JSON.stringify(Object.keys(obj)));
> ["_wrapped","_chain"]
This lead me to realise that obj was actually an Underscore.js wrapper around an object, and the initial debugging was lying to me.
I had similar problem (when developing for SugarCRM), where I start with:
var leadBean = app.data.createBean('Leads', {id: this.model.attributes.parent_id});
// This should load object with attributes
leadBean.fetch();
// Here were my attributes filled in with proper values including name
console.log(leadBean);
// Printed "undefined"
console.log(leadBean.attributes.name);
Problem was in fetch(), its async call so I had to rewrite my code into:
var leadBean = app.data.createBean('Leads', {id: this.model.attributes.parent_id});
// This should load object with attributes
leadBean.fetch({
success: function (lead) {
// Printed my value correctly
console.log(lead.attributes.name);
}
});
Just in case this is helpful for someone, I had a similar problem, and it's because someone created an override for .toJSON in the object I was working with. So the object was something like:
{
foo: {
bar: "Hello"
baz: "World"
}
}
But .toJSON() was:
toJSON() {
return this.foo
}
So when I called JSON.stringify(myObject) it returned "{"bar": "Hello", "baz": "World"}". However, Object.keys(myObject) revealed the "foo".
I faced the same problem today. In my case the keys were nested, i.e key1.key2.
I split the keys using split() and then used the square bracket notation, which did work for me.
var data = {
key1: {
key2: "some value"
}
}
I split the keys and used it like this, data[key1][key2] which did the job for me.
I had the same issue today. Problem was caused by uglify-js. After I executed same non-uglified code problem was solved. Removing of
--mangle-props
from uglify-js was enough to have working uglified code.
Perhaps, the best practice is to use some prefix for properties that has to be mangled with regex rule for uglify-js.
Here is the source:
var data = JSON.parse( content);
...
this.pageIndex = parseInt(data.index);
this.pageTotal = parseInt(data.total);
this.pageLimit = parseInt(data.limit);
and here is how it was uglified:
var n = JSON.parse( t);
...
this._ = parseInt(n.index), this.g = parseInt(n.total), this.D = parseInt(n.C)
None of the JSON stringify/parse worked for me.
formValues.myKey: undefined
formValues.myKey with timeout: content
I wanted the value of formValues.myKey and what did the trick was a setTimeout 0 like in the example below. Hope it helps.
console.log('formValues.myKey: ',formValues.myKey);
setTimeout( () => {
console.log('formValues.myKey with timeout: ', formValues.myKey);
}, 0 );
I had a similar issue today in React. Eventually realised that the problem was being caused by the state not being set yet. I was calling user.user.name and although it was showing up in the console, I couldn't seem to access it in my component till I included a check to check if user.user was set and then calling user.user.name.
Check whether you had applied any filters in the console. It happens to me in chrome console.
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 🤣).
So, lesson learned, check property name casing more properly.
I'm experiencing extremely strange behavior when accessing a property of an object.
Running this code:
console.log(myObj);
console.log(myObj.items);
console.log(myObj);
I get this output in the console:
How could this possibly happen?
console.log, during execution, outputs a string representation of the value in the console. Depending on Chrome's mood, it might show something [object Object] or something like Object {}. That doesn't matter.
Now note the little blue i beside it. What it means is that the object has been modified between the time it was logged and the time you expanded it in the console, and it now shows the current value (with the 2 items), not the value during console.log's execution (no items). You can actually hover on the blue i to get the explanation.
To replicate the issue, open the console and run this snippet:
var obj = {arr: []};
console.log(obj);
console.log(obj.arr);
console.log(obj);
// by this time, you see 2 object logs, 1 empty array
// (representation differs from time to time)
// > Object
// []
// > Object
obj.arr.push(1,2);
// when you try to expand the objects, an array of 2 items magically appear
// but you still see the empty array ([]) in the log.
This behavior differs across browsers. As far as I remember, Firebug outputs a serialized version when console.log executes, hence this doesn't happen there.
Debugging the code
To debug this kind of code, you have several options:
The quickest way is to log the stringified version of the object using JSON.stringify, like console.log(JSON.stringify(obj));
The best way is to add a breakpoint via the Sources tab. Browse to your file in the Sources tab of the Dev Tools, and add a breakpoint in that position. Run your code, and it will pause at that point. Use the Scope panel to inspect the variables.
If you can't reach the code using a breakpoint (probably run using eval or injected in the console), you can use the debugger; statement. Just put it in the code at that position. Run the code and it will pause when it reaches the statement. Use the Scope panel in Sources tab to inspect.
You could look at the JSON representation of the object to check, you can do that with:
console.log(JSON.stringify(myObj, null, 2));
With so little information, I can only assume you're dynamically populating the items property, making it empty when the 2nd console log runs.
Now you're wondering why it is there in the 1st console log: the console doesn't show the object properties that were there at the time the object was logged, but rather at the time the object entry was expanded in the console, so it could be that the items were populated after your 2nd console log and before you expanded the 1st one. Try logging the object as a string or a JSON to see its actual state at the time the console log was run.
Bottom line: object properties in the dev console get updated only when you expand the object entry (when you click the arrow) so you're not seeing the actual representation of the object from the time it was logged.
Here's a simple demonstration - see how it can even turn from an array into a string:
var obj = {p: []}
console.log(obj);
setTimeout(function(){
obj.p = "I'm not even an array!";
}, 1000);
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'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 lines print in Console
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.
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(...).
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 :)
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);
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);
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.
I just encountered this issue with objects generated by csv-parser from a CSV file that was generated by MS Excel. I was able to access all properties except the first property - but it would show up ok if I wrote the whole object using console.log.
Turned out that the UTF-8 CSV format inserts 3 bytes (ef bb bf) at the start corresponding to an invisible character - which were being included as part of the first property header by csv-parser. Solution was to re-generate the CSV using the non-UTF option and this eliminated the invisible character.
I struggled with this issue today, and thought I'll leave a reply with my solution.
I was fetching a data object via ajax, something like this:
{"constants": {"value1":"x","value2":"y"},"i18n" {"data1":"x", "data2":"y"}}
Let's say this object is in a variable called data. Whenever I referenced data.i18n I got undefined.
console.log(data) showed the object as expected
console.log(Object.keys(data)) said ["constants","i18n"] as expected
Renaming i18n to inter didn't change anything
I even tried to switch the data to make "i18n" the first object
Moved code around to make absolutely sure the object was completely set and there was no problem with the ajax promise.
Nothing helped... Then on the server side I wrote the data to the php log, and it revealed this:
{"constants": {"value1":"x","value2":"y"},"\u045618n" {"data1":"x", "data2":"y"}}
The "i" in the index key was actually a u0456 (cyrillic i). This was not visible in my php editor or the browser console log. Only the php log revealed this... That was a tricky one...
My data was just json data string . (This variable was stored as json string in the session).
console.log(json_string_object)
-> returns just the representation of this string and there is no way to make difference whether is string or object.
So to make it work I just needed to convert it back to real object:
object = JSON.parse(json_string_object);
In 2018 Mozilla warns us in the Mozilla Docs here!
I quote "Logging Objects":
Don't use console.log(obj);,
use console.log(JSON.parse(JSON.stringify(obj)));.
This way you are sure you are seeing the value of obj at the moment
you log it.
If this is an issue occurring when working with Mongoose, the following may happen:
console.log(object)
returns everything, including the desired key.
console.log(object.key)
returns undefined.
If that is happening, it means that the key is missing from the Mongoose Schema. Adding it in will resolve the issue.
For me it turned out to be a Mongoose-related problem.
I was looping over objects that I got from a Mongo query. I just had to remove:
items = await Model.find()
And replace it by:
items = await Model.find().lean()
This might help somebody as I had a similar issue in which the JSON.parse() was returning an object that I could print on the console.log() but I couldn't acccess the specific fields and none of the above solution worked for me. Like using the combination of JSON.parse() with JSON.stringify().
var jsonObj = JSON.parse(JSON.stringify(responseText))
// where responseText is a JSON String returned by the server.
console.log(jsonObj) ///Was printing the object correctly
console.log(jsonObj.Body) /// Was printing Undefined
I ended up solving the problem by using a different parser provided by ExtJs Ext.decode();
var jsonObj = Ext.decode(responseText)
console.log(jsonObj.Body) //Worked...
I had the same issue and no solution above worked for me and it sort of felt like guess work thereafter. However, wrapping my code which creates the object in a setTimeout function did the trick for me.
setTimeout(function() {
var myObj = xyz; //some code for creation of complex object like above
console.log(myObj); // this works
console.log(myObj.propertyName); // this works too
});
I've just had the same issue with a document loaded from MongoDB using Mongoose.
Turned out that i'm using the property find() to return just one object, so i changed find() to findOne() and everything worked for me.
Solution (if you're using Mongoose): Make sure to return one object only, so you can parse its object.id or it will be treated as an array so you need to acces it like that object[0].id.
In My case, it just happens to be that even though i receive the data in the format of a model like myMethod(data:MyModelClass) object till the received object was of type string.
Which is y in console.log(data) i get the content.
Solution is just to parse the JSON(in my case)
const model:MyMOdelClass=JSON.parse(data);
Thought may be usefull.
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
});
if you're using TYPESCRIPT and/or ANGULAR, it could be this!
.then((res: any) => res.json())
setting the response type to any fixed this issue for me, I couldn't access properties on the response until i set res: any
see this question Property '_body' does not exist on type 'Response'
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.
I just encountered this issue as well, and long story short my API was returning a string type and not JSON. So it looked exactly the same when you printed it to the log however whenever I tried to access the properties it gave me an undefined error.
API Code:
var response = JsonConvert.DeserializeObject<StatusResult>(string Of object);
return Json(response);
previously I was just returning:
return Json(string Of object);
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]);
I had an issue like this, and found the solution was to do with Underscore.js. My initial logging made no sense:
console.log(JSON.stringify(obj, null, 2));
> {
> "code": "foo"
> }
console.log(obj.code);
> undefined
I found the solution by also looking at the keys of the object:
console.log(JSON.stringify(Object.keys(obj)));
> ["_wrapped","_chain"]
This lead me to realise that obj was actually an Underscore.js wrapper around an object, and the initial debugging was lying to me.
I had similar problem (when developing for SugarCRM), where I start with:
var leadBean = app.data.createBean('Leads', {id: this.model.attributes.parent_id});
// This should load object with attributes
leadBean.fetch();
// Here were my attributes filled in with proper values including name
console.log(leadBean);
// Printed "undefined"
console.log(leadBean.attributes.name);
Problem was in fetch(), its async call so I had to rewrite my code into:
var leadBean = app.data.createBean('Leads', {id: this.model.attributes.parent_id});
// This should load object with attributes
leadBean.fetch({
success: function (lead) {
// Printed my value correctly
console.log(lead.attributes.name);
}
});
Just in case this is helpful for someone, I had a similar problem, and it's because someone created an override for .toJSON in the object I was working with. So the object was something like:
{
foo: {
bar: "Hello"
baz: "World"
}
}
But .toJSON() was:
toJSON() {
return this.foo
}
So when I called JSON.stringify(myObject) it returned "{"bar": "Hello", "baz": "World"}". However, Object.keys(myObject) revealed the "foo".
I faced the same problem today. In my case the keys were nested, i.e key1.key2.
I split the keys using split() and then used the square bracket notation, which did work for me.
var data = {
key1: {
key2: "some value"
}
}
I split the keys and used it like this, data[key1][key2] which did the job for me.
I had the same issue today. Problem was caused by uglify-js. After I executed same non-uglified code problem was solved. Removing of
--mangle-props
from uglify-js was enough to have working uglified code.
Perhaps, the best practice is to use some prefix for properties that has to be mangled with regex rule for uglify-js.
Here is the source:
var data = JSON.parse( content);
...
this.pageIndex = parseInt(data.index);
this.pageTotal = parseInt(data.total);
this.pageLimit = parseInt(data.limit);
and here is how it was uglified:
var n = JSON.parse( t);
...
this._ = parseInt(n.index), this.g = parseInt(n.total), this.D = parseInt(n.C)
None of the JSON stringify/parse worked for me.
formValues.myKey: undefined
formValues.myKey with timeout: content
I wanted the value of formValues.myKey and what did the trick was a setTimeout 0 like in the example below. Hope it helps.
console.log('formValues.myKey: ',formValues.myKey);
setTimeout( () => {
console.log('formValues.myKey with timeout: ', formValues.myKey);
}, 0 );
I had a similar issue today in React. Eventually realised that the problem was being caused by the state not being set yet. I was calling user.user.name and although it was showing up in the console, I couldn't seem to access it in my component till I included a check to check if user.user was set and then calling user.user.name.
Check whether you had applied any filters in the console. It happens to me in chrome console.
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 🤣).
So, lesson learned, check property name casing more properly.
This bit of code I understand. We make a copy of A and call it C. When A is changed C stays the same
var A = 1;
var C = A;
console.log(C); // 1
A++;
console.log(C); // 1
But when A is an array we have a different situation. Not only will C change, but it changes before we even touch A
var A = [2, 1];
var C = A;
console.log(C); // [1, 2]
A.sort();
console.log(C); // [1, 2]
Can someone explain what happened in the second example?
Console.log() is passed a reference to the object, so the value in the Console changes as the object changes. To avoid that you can:
console.log(JSON.parse(JSON.stringify(c)))
MDN warns:
Please be warned that if you log objects in the latest versions of Chrome and Firefox what you get logged on the console is a reference to the object, which is not necessarily the 'value' of the object at the moment in time you call console.log(), but it is the value of the object at the moment you open the console.
Pointy's answer has good information, but it's not the correct answer for this question.
The behavior described by the OP is part of a bug that was first reported in March 2010, patched for Webkit in August 2012, but as of this writing is not yet integrated into Google Chrome. The behavior hinges upon whether or not the console debug window is open or closed at the time the object literal is passed to console.log().
Excerpts from the original bug report (https://bugs.webkit.org/show_bug.cgi?id=35801):
Description From mitch kramer 2010-03-05 11:37:45 PST
1) create an object literal with one or more properties
2) console.log that object but leave it closed (don't expand it in the console)
3) change one of the properties to a new value
now open that console.log and you'll see it has the new value for some reason, even though it's value was different at the time it was generated.
I should point out that if you open it, it will retain the correct value if that wasn't clear.
Response from a Chromium developer:
Comment #2 From Pavel Feldman 2010-03-09 06:33:36 PST
I don't think we are ever going to fix this one. We can't clone object upon dumping it into the console and we also can't listen to the object properties' changes in order to make it always actual.
We should make sure existing behavior is expected though.
Much complaining ensued and eventually it led to a bug fix.
Changelog notes from the patch implemented in August 2012 (http://trac.webkit.org/changeset/125174):
As of today, dumping an object (array) into console will result in objects' properties being
read upon console object expansion (i.e. lazily). This means that dumping the same object while
mutating it will be hard to debug using the console.
This change starts generating abbreviated previews for objects / arrays at the moment of their
logging and passes this information along into the front-end. This only happens when the front-end
is already opened, it only works for console.log(), not live console interaction.
The latest guidance from Mozilla as of February 2023:
Don't use console.log(obj), use console.log(JSON.parse(JSON.stringify(obj))).
This way you are sure you are seeing the value of obj at the moment you log it. Otherwise, many browsers provide a live view that constantly updates as values change. This may not be what you want.
Arrays are objects. Variables refer to objects. Thus an assignment in the second case copied the reference (an address) to the array from "A" into "C". After that, both variables refer to the same single object (the array).
Primitive values like numbers are completely copied from one variable to another in simple assignments like yours. The "A++;" statement assigns a new value to "A".
To say it another way: the value of a variable may be either a primitive value (a number, a boolean, null, or a string), or it may be a reference to an object. The case of string primitives is a little weird, because they're more like objects than primitive (scalar) values, but they're immutable so it's OK to pretend they're just like numbers.
EDIT: Keeping this answer just to preserve useful comments below.
#Esailija is actually right - console.log() will not necessarily log the value the variable had at the time you tried to log it. In your case, both calls to console.log() will log the value of C after sorting.
If you try and execute the code in question as 5 separate statements in the console, you will see the result you expected (first, [2, 1], then [1, 2]).
Though it's not going to work in every situation, I ended up using a "break point" to solve this problem:
mysterious = {property:'started'}
// prints the value set below later ?
console.log(mysterious)
// break, console above prints the first value, as god intended
throw new Error()
// later
mysterious = {property:'changed', extended:'prop'}
The issue is present in Safari as well. As others have pointed out in this and similar questions, the console is passed a reference to the object, it prints the value of the object at the time the console was opened. If you execute the code in the console directly for example, the values print as expected.
Instead of JSON stringifying, I prefer to spread arrays (e.g. in your case console.log([...C]);) and objects: the result is quite the same, but the code looks a bit cleaner. I have two VS code snippets to share.
"Print object value to console": {
"prefix": "clo",
"body": [
"console.log(\"Spread object: \", {...$0});"
],
"description": "Prints object value instead of reference to console, to avoid console.log async update"
},
"Print array value to console": {
"prefix": "cla",
"body": [
"console.log(\"Spread array: \", [...$0]);"
],
"description": "Prints array value instead of reference to console, to avoid console.log async update"
}
In order to get the same output as with console.log( JSON.parse(JSON.stringify(c))), you can leave out the string part if you wish. Incidentally, the spread syntax often saves time and code.