Javascript object show in blank - javascript

I faced a problem when i console my object it shows blank but mean time when i expand the object it shows correct value, and from my controller end i cannot catch the value What's the problem?
that means.
console.log(object.limit)
-->undefined

I have faced a similar problem multiple times, majorly it's due to a
sync behavior of the variable, so at time you are checking the
variable might not have that value, sometimes it's not a JavaScript
Object, or sometimes there is a very silly mistake as .limit instead
of .limit .
Some tips for debugging
Check output of Object.keys(objectVariable).
I hate this, but try doing alert(objectVariable) as it will print the value at that time of execution, where console.log prints latest variable value regardless of when printed.
Try printing JSON.stringify(objectVariable), same as alert but in console, also prints value at time of execution not latest.

Try to define one varible in console
var object = { limit:"1",skip:'2'};
console.log(object.limit);

As per the jkondratowicz comment, Objects are passed by reference to console. When you console.log it, at that moment it's empty, only later are those two properties added.
properties are added inside object depending on JavaScript implementation.
Hence, When you are trying to do console.log(object.limit) that time your object is an empty object but after some lines of code you are adding the properties(limit) into the object and then it is available into the object.

Related

Value is null even if it's not in console.log (...)

I'm using Angular and I'm trying to access property img of my object, and when I'm doing console.log(..) of my whole object. Value is there, but when I'm doing console.log(..) of object's property it said it's null.
console.log("Product:", this.article);
var url = this.article.img;
console.log("Image" , url);
Console:
I don't know how is this possible if this.article.img; looks like has some value in console.log. But when I try to access it, it says it's null. How come?
The object isn't rendered immediately. Your img property has a null value at logging time but when you open the object in the console, later, it's filled.
You can check that by logging console.log(JSON.stringify(this.article)).
The most probable reason of your problem is some asynchronous code whose achievement you're not correctly waiting for. As the object is taken from a database as you said, I guess you forget to use the object in the callback (which might be promise based).
Instead of logging:
console.log("Product:", this.article);
var url = this.article.img;
console.log("Image" , url);
try debugging, so that you can inspect the value in real time:
console.log("Product:", this.article);
debugger;
...
Because the browser console works with references in most modern clients:
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 click it open.
See: https://developer.mozilla.org/en-US/docs/Web/API/Console/log

Console.log: the length of array is 0 and 1 at same time

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.

Object defined but when accessing a property returns undefined

I have a really weird issue, can someone explain please.
In my controller, when I am logging an object
console.log($rootScope.authUser)
it returns:
where messages is an array of objects. When I am trying to access one of the properties though:
console.log($rootScope.authUser.messages)
I am getting an empty array - different results! How is this possible 0.o
Try to use
console.log(angular.copy($rootScope.authUser))
It seems that console.log prints the complete object reference, and at the time you look at it, it has already changed. If you make a copy, the copy will not be changed further and you got the "real" output at that time.

Can not access and change property of a variable

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!

Javascript object changing automatically?

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.

Categories