Unable to get properties of JavaScript Object - javascript

I'm returning JSON from a php file to a jQuery function, and am getting an object output with the properties agt_id and agt_type. With the webkit dev tools I can print see the object, expand it and see the properties. However, I get undefined when I try:
console.log(output.agt_id);
Here's what I'm seeing in my console with console.log(output):

From your screen shot, it looks like your object is in an Array. You can access the object at index 0 of the Array.
console.log(output[0].agt_id);

Related

JavaScript Trying to read object giving me undefined on console

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.

why is the elements in HTMLCollection is different from what HTMLCollection.item() returned in Chrome

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.

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!

Array[0] but still data in it

I'm debuging my code with Chrome DevTools and I have a strange ocasion.
I have an array which which contains data but console shows Array[0]
When I try to access it, it gives me an arror SyntaxError: Unexpected token ILLEGAL
Let me show you the details:
There is an Object I call from console "quick_chat", when I expand this object there is another Object called data, which shows like data: Array[0], but I'm still able to expand it where there is another object with the Id of my chat.
as you see here data is Array[0] but with data in it.
How can I access it with console? any suggestions?
That data is stored in a property of the array, and would be accessed using:
quick_chat.data["3SWA8h0clcAi"]

Categories