Get vue object inside object into console - javascript

I have a object in my Vue called 'file'.
When I use console.log to look at its contents its as below in the picture
console.log(file);
But now I want to see the contents of exif so I tried
console.log(file.exif)
The problem is that its always 'undefined'. What am I doing wrong? Please help.

The first thing I notice is that exif doesn't have the ... that all the other properties have. This suggests that it doesn't have a property getter. As reactive properties all have getters it would suggest that this property was added later than the others without using Vue.set.
With that in mind it is worth noting that objects logged to the console are live. If you hover over the little blue i icon you'll get some indication of this. The console does not take a copy of the properties when you log an object. It will only grab the property values when you expand the object in the console.
So what I believe is happening is that the property exif does not exist at the point you are logging out the object but it is subsequently added before you click on the object in the console.
There are other things you can try logging to double check. e.g. console.log(JSON.stringify(file)) or console.log(Object.keys(file)). These should all confirm that the exif property does not exist at that point.

Related

How to conditionally paste an array value in variable initialization?

I have a getter in pinia store and this getter should return a typed array of objects.
Some objects can be pasted only by specific conditions, but typescript is throwing an error (see screenshot).
I tried several methods of conditional pasting, but none of them worked for me. The method i used on screenshot is the best in my opinion, but it returns an empty array, that has to be destructed and paste nothing. But as we can see it throws an error.
I can't push this object to the array after initialization because this array is a getter of pinia store.

can't access array of objects in object

I'm baffled about why I'm getting an error when trying to access an array inside of an object in ReactJS.
I am using Redux to store an object in State.
I have a success function that allows the page to render, so by the time I get to this object it has for sure loaded. (I noticed a ton of similar questions to this where that's usually the problem).
When I do this I get the proper results:
const { events } = this.props
console.log(JSON.stringify(events.listSignup))
{"data":[{"eventID":"264712106049274377","name":"BookOne","email":null,"verify":null,"privacy":null,"order":null,"group":null},{"eventID":"264712106049274377","name":"BookTwo","email":null,"verify":null,"privacy":null,"order":null,"group":null}]}
I can see that the array "data" exists, but when I try:
console.log(JSON.stringify(events.listSignup.data[0].name))
or
console.log(JSON.stringify(events.listSignup.data[0]))
I get "TypeError: Cannot read property 'data' of undefined"
I'm at my wits end trying to figure out what's going on. Any advice would be much appreciated!
You're right to be baffled, because what you [think you] have observed isn't possible.
This happens a lot to me as a developer, and my advice is that when this happens, trust your knowledge (you know this isn't possible!) and double check what you are seeing.
I suspect that the first time your component renders, this.props.events is undefined, but then it very quickly re-renders with this.props.events being set.
I would suggest adding back this line (without the others):
console.log(JSON.stringify(events.listSignup))
And scrolling up in your javascript console to see if you have any logs that are just displaying undefined. If so, you probably need to double check the logic which is preventing the page from rendering before you have successfully received the data, as I suspect that is where your problem is.

How to bind to view model object properties?

We are building a form-based app that has a complex object with many levels of nested properties.
So far, I have created a simple experiment with a single view model with one object. The experiment has fields that are bound to object properties, which successfully display the data. However, when changing the fields, the object does not seem to be updated.
What should I do to make sure form input propagates throughout the view model and into the template?
You need to use getter method in app.js as below,
get swaggerString() {
console.log(this.swagger);
const swaggerStringified = JSON.stringify(this.swagger);
return swaggerStringified;
}
In your HTML, change method to property,
${swaggerString}
Updated your GIST,
https://gist.github.com/anonymous/3b85820d66c2dfbf0f770208a7c8b63f
Hope this helps!
What are you planning to do in the real app?
The accepted answer only answers how to solve your problem as posted in the gist. I'm guessing your real app doesn't need to display JSON data.
If you are just wanting to display deeply nested object properties, then that is simple, you simply bind to those properties themselves. See here: https://gist.run/?id=5af5c22be4b49c0e3fef327e3d8b986b
<pre>
{
"name": "${swagger.name}",
"version": "${swagger.version}"
}
</pre>
You can even go arbitrarily deep in to an object tree, e.g. ${foo.bar.baz.ball.foop}.
The thing to understand is that Aurelia observes for changes to whatever you tell it to observe. When you tell it to simply observe an property that is an object, it can only watch for changes to the property itself. This means it will only see a change if you assign a different object to the property. It does not watch every property on the object for changes for performance reasons (and also due to Object.observe being cancelled).
All hope is not lost, though. Please respond with some specifics and I'll try to help you out better.

Erratic behavior of Javascript - Cannot read property 'longitude' of undefined

I'm working on an Angular App, which loads data from an API.
Everything is working as expected, except periodic receiving this bug in Chrome console.log
TypeError: Cannot read property 'longitude' of undefined
This causes some of the subsequent functions to disfunction aswell. The line angular complains at, is the following
function updateMapWaypoint(lastposition) {
console.log("updateMapWaypoint(%s) called", lastposition);
console.log($scope.units[$scope.selectedUnitIndex]);
var longitude = (lastposition) ? $scope.units[$scope.selectedUnitIndex].lastposition.gps.longitude : $scope.unsortedPositions[$scope.selectedPositionIndex].gps.longitude;
Where to two first is debugging and the last one, the line causing trouble. As far as I can see from the printet object in the console. Javascript should have no trouble locating longitude from the object, however it throws the error and I can't find any way to solve it.
All help is appreciated and if more details is required, I'll provide if possible for me.
This looks like it might be a race condition.
console.log() will show you the object as it is right now, and not what is was when you called console.log(). To see the properties of an object at a certian point in time you must copy its content and send them to console.log(), for example by stringifying it:
console.log(JSON.stringify(myObject))
Or if you are using Angular:
console.log(angular.extend({}, myObject));
This is confusing (it has messed with me several times). Remember that you are sending console.log() an object reference, not a copy of the object.

Chrome Javascript Console - Reference to object output with console.log(obj)?

Is there a way to get a javascript reference to an object that was output to the chrome console?
For example, say I had the following javascript:
top.it = {hi:'there'};
console.log(top.it);
This would output to the chrome console as
Object {hi: "there"}
I do this alot, and sometimes would like to get a reference to the object in the console, to run methods on it, and things like that.
Is there a way to get a reference to objects that have been output using console.log?
I know there's a way to get references to recently inspected items (e.g. $0), but this isn't for inspected items...
Right click on the console log output provides the option "Store as Global Variable".
Here is a video of it(not created by me).

Categories