Why does Chrome display two differing datasets depending on if you have the object view expanded?
In contracted view, my object has two properties:
In expanded view, my object has three properties:
The object you see in the console is a snapshot of the object at a particular point in time - the time when you logged it. When you expand the object, it will evaluate the properties again.
In the example below, I have created an object with two array properties. I logged it the console, and then I added a third property, c to it.
Only the first two properties are showing still, even though I just added a third property. After expanding the object in the console, I can see the third one. It is the latest state of the object.
If you hover over the little blue i icon, it explains what it has done:
Value below was evaluated just now.
#Gideon Pyzer is right. the properties were caculated and added after expanding the object in the console.
Just add one line code above your debug code and reopen the chrome dev tool, you will see the differences.
obj = Object.freeze(obj); //add this line before your console.log
console.log(obj);
Before:
After:
one similar question of mine:
Why can't I access the attr of the javascript object shown in chrome dev tool
You can clone your object to prevent re-evaluate.
console.log(Object.assign({}, obj));
You can get a real hard copy object by using this module. It will give you the snapshot of the object at moment when you call it.
https://www.npmjs.com/package/nest-object-deep-copy
const nestedHardCopy = require('nest-object-deep-copy');
console.log(nestedHardCopy(obj));
Related
I am trying to read some data what I have.
My console is showing that it looks like this:
{
"calls":"0",
"ids":[
{
"id":"5117-9e39-7afd-46b3-a066-14e4-3433-871f",
"feat":{
"dates":{
"exp":"2018-10-02"
},
"read":[
{
"name":"Joe"
}
]
}
}
]
}
So I'm trying to console.log so it gives me the name.
I've done this:
console.info(data.ids.read.name)
This is returning undefined.
How can I get it to return the name?
Based on your comment showing the whole of data, you would need to use data.ids[0].feat.read[0].name to get the name.
Note that ids and read hold arrays, hence the need for the [0].
based on what you describe I think your problem is caused by you logging an object and logging a particular member of the object.
The console.log statement will give you a preview that you can expand, the preview shows the object as it is when you log it. It will sometimes give you an option to expand it and that expanded view will show the object as it is now.
When you log a primitive value or get a non expandable preview then you'll always see the object as it is when you log it.
Nikhil's suggestion to log the JSON string from the object is a good tip since you will log the object as is when you log it (string is primitive and won't give you an expand option). You could also use console.table.
Below you can see the behavior and difference of preview and expanded (you can run it in the browser's console):
var arr = [];
console.log('empty array?',arr);//previews to [] but expands to array with one object
console.log('undefined wont change',arr[0])//logs undefined because arr is still empty
arr.push({name:'ben'});//mutate array to add one item
You may be logging something that is mutated later by a resolving promise or from a callback.
I apologize if the title makes you confused. Let me explain that.
In Chrome dev tool, if I use, for example:
document.getElementsByClassName("login")
I get get an HTMLCollection which As you can see the 0-indexd property represents an typical Element object.
However, if I use
document.getElementsByClassName("login").item(0);
I got something like this:
As you can see this is not an element object. Instead, it is an HTML Div element(correct me if I named it incorrectly).
My question is that why item() method does not return the same object in the HTMLCollection? To my understanding, HTMLCollection is an object, what is retrieved from item() method is a property of the object, so they are supposed to be the same. Why is the result is unexpected?
Thank you!
This is just the Chrome console formatting the object in a "pretty" way:
By default, DOM elements are logged into the console as representation of their HTML
(From https://developers.google.com/web/tools/chrome-devtools/console/console-write#formatting_dom_elements_as_javascript_objects)
If you want to view the actual object, you can obtain a JavaScript representation of it with:
console.dir(document.getElementsByClassName("login").item(0))
(You can optionally drop the console.)
See: https://developers.google.com/web/tools/chrome-devtools/console/console-reference for info on the various console functions that are available.
About the console.log, i believe i have a case related to
Javascript array length of 0
In my console i got
my code related at 24
const lists = this.props.localData.lists;
if(lists.length === 0 ) {
console.log('lists',lists);
}
What is going on here?
if it is right in its way, how could i access lists[0](undefined)?
could anyone give me a hint?
Thanks in advance.
Some of the comments hinted at the issue here, but I don't see one that fully and correctly explains it. Here is what happened.
The initial one-line display of the array is created at the time you call console.log(). Simply viewing the log doesn't change anything (contrary to what one or two comments say). And subsequent updates to the array don't change this one-line view either.
But when you click the little triangle to expand the log entry, the expanded multiline display is created using the current array contents at the time you click the triangle. That is what causes the difference between the two. Your array was empty when you called console.log(), and you added an element to it after that but before you clicked to expand the display in the console.
If you want to get a full view of the array as it exists at the moment of the console.log() call, a good way to do it is to use JSON.stringify(). You can use the third argument to this function to pretty-print the result. So in your example, you might use:
console.log( JSON.stringify( lists, null, 4 ) );
Check this out: foo = [] create a new array and assigns a reference to it to a variable. Any other references are unaffected and still point to the original array.
foo.length = 0 modifies the array itself. If you access it via a different variable, then you still get the modified array.
Lucky with that.
I am trying to modify a property of an object.
console.log(dataset);
// -> This shows object with an 'ids' property, and it is an array with 7 elements.
But
console.log(dataset.ids); //shows an empty array
Please take a look at this image, it describles how 'dataset' look like: weired js
Can you explain why?
Thank you!
It's probably because your dataset.ids array isn't filled yet on the init.
Why?
When your open your panel from the Chrome console to inspect in details of dataset, Chrome console just recall a console log on the reference object.
At this time, the array is filled.
You should probably search a hook from your KanbanView object where you are sure this array is filled if you want to access it.
This console behavior could be confusing the first time when you face such case!
I have the following code:
var doneFile=convertToMOSTEM(curFile.file,curFile.color,curFile.importance);
console.log('doneFile:');
console.log(doneFile);
debugger;
filesOS.add(doneFile);
debugger;
convertToMOSTEM returns a custom object. The console.log logs the custom object created by convertToMOSTEM to the console, but at the debugger statement directly after the console.log logs it as a different object. I do not wish to elaborate more about the contents of convertToMOSTEM, and am instead asking for situations where this can happen. I can say, however, that convertToMOSTEM creates a custom object with a custom constructor, and then it modifies some of the properties of that custom object, then returns the modified object. The console.log logs the correct version of the object, but the object that I get in the debugger statement is like a clean version of the custom object without the extra modifications applied by the convertToMOSTEM function. I am not sure if that is very clear, if you have any questions please ask me questions in the comments.
One possibility is that you're being misled by one bit of behavior that console.log() has that isn't obvious.
When you log an object, the console doesn't save all of the properties of that object for display later. The only real-time display is whatever the single-line printout from console.log() shows. If you click the triangle to expand an object that was displayed with console.log(), the expanded display shows the properties of that object at the time you click the triangle, not at the time of the original console.log() call.
To avoid this, log the individual properties you are interested in at the time of making the call. For example, if you have a person object with id, name, and email properties, don't do this:
console.log( person );
Do this instead:
console.log( person.id, person.name, person.email );
That way, if those three properties are string values, you will log their actual values at the time you make the console.log() call.