Ionic GeoPosition TypeError - javascript

I am using the Ionic Framework for an app I am creating and got stopped by this. I'm using the Geolocation module to get the user's current position. I have an object that stores the latitude and longitude as so:
location_coordinate: {
latitude: number;
longitude: number;
}
But when I try to save the latitude and longitude to my object (this.location_coordinate.latitude = resp.coords.latitude;) this doesn't work and an error is thrown.
Error getting location TypeError: Cannot set property 'latitude' of undefined
If I set it to a variable, for example:
latitude: number;
And then:
this.lat = resp.coords.latitude;
This works. Why is this so? Am I missing something?
Note: The resp.coords.latitude is what is returned from the get request.

Error getting location TypeError: Cannot set property 'latitude' of undefined.
This error probably means location_coordinate is undefined. Check the code where you have defined [or maybe never defined?] this.location_coordinate. Once this is set to some object, you should definitely be able to use this.location_coordinate.latitude = resp.coords.latitude;
In order to validate my hypothesis, you can do following:
Assign a constant instead to see if error persists: this.location_coordinate.latitude = 0;
Print the value of this.location_coordinate before accessing this.location_coordinate.latitude

Related

How to change return type of a Map() object

I faced a type error when I store an item in a JavaScript Map. Is there a way to fix the return type of a value in a map? The below code implies, the returned type is an object but not WebGLTexture.
Error
Uncaught TypeError: Failed to execute 'bindTexture' on 'WebGLRenderingContext': parameter 2 is not of type 'WebGLTexture'.
The Code Snippet
const textures = new Map();
// ...
console.log('Texture:',newTexture)
textures.set(uuid ,newTexture);
let createdObject = textures.get(uuid);
console.log('WebGL Object:',createdObject)
console.log('Type:', typeof createdObject)
Related Console Log

Cannot Access values of a Javascript Object

I'm developing a webApp using React, I'm having issues accessing data inside a javascript Object, here is the code:
const user_position = System.prototype.getUserPosition();
console.log({user_position:user_position,latitude:user_position.latitude,longitude:user_position["longitude"]})
position_update.latitude = user_position.latitude;
position_update.longitude = user_position.longitude;
position_update.timestamp = user_position.timestamp
this.setState({currentSearchSelection: "La tua posizione"});
I want to access the data inside the user_position Object, but the output is quite strange:
{user_position: {…}, latitude: undefined, longitude: undefined}
latitude: undefined
longitude: undefined
user_position:
latitude: 41.818550699999996
longitude: 12.495401099999999
timestamp: 1587660938111
__proto__: Object
__proto__: Object
Basically, the user_position is populated but I cannot access the values inside it, what I'm doing wrong?
If you know the name of the exact values in the object, you can get it directly:
console.log(user_position.object_name)
Right now it is saying that your user_position is an object, and is defined.
Maybe even try just print that user_object
console.log(user_object) to see what is in it.
Thanks everybody for the support, the answer was simple: the getUserPosition() method was async(even it was not marked as it), so there was nothing wrong in the code of this particular class, what happened was:
user_position.object_name // print undefined since user_position is not populated
user_position // print value because the variable is linked to the result of the async method
So what I did was editing the code with a callback:
System.prototype.getUserPosition().then(user_position=>{
position_update.latitude = user_position.latitude;
position_update.longitude = user_position.longitude;
position_update.timestamp = user_position.timestamp
this.setState({currentSearchSelection: "La tua posizione"});
})
and everything worked.

ko.JSON with observableArray throws Uncaught DOMException

I'm trying to persist an observable array to localStorage. To do this I'm using ko.toJSON.
var that = this;
this.items = ko.observableArray();
this.items.subscribe(function(){
localStorage.setItem("items", ko.toJSON(that.items()));
});
All that gets persisted to localStorage is false.
It throws a very random looking error: knockout-3.4.2.js:55 Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules.
Any idea what's going on here?
I get the error as well with a simple var json = ko.toJSON(that.items()); so it clearly comes from that. However, I do not get that error when simply doing this: var json = ko.toJSON([{'key': 'value'}]);.
UPDATE: Here's the full error message:
Uncaught DOMException: Failed to read the 'cssRules' property from
'CSSStyleSheet': Cannot access rules
at http://localhost:8080/js/knockout-3.4.2.js:55:405
at c (http://localhost:8080/js/knockout-3.4.2.js:56:172)
at b (http://localhost:8080/js/knockout-3.4.2.js:55:380)
at http://localhost:8080/js/knockout-3.4.2.js:56:23
at c (http://localhost:8080/js/knockout-3.4.2.js:56:172)
at b (http://localhost:8080/js/knockout-3.4.2.js:55:380)
at http://localhost:8080/js/knockout-3.4.2.js:56:23
at c (http://localhost:8080/js/knockout-3.4.2.js:56:172)
at b (http://localhost:8080/js/knockout-3.4.2.js:55:380)
at http://localhost:8080/js/knockout-3.4.2.js:56:23
UPDATE2: Here's the actual section of code where the problem lies:
This is the exact context of the problem:
this.savedPlaces.subscribe(function() {
// Add all places to filteredPlaces
that.filterPlaces();
// Reinitialize the filter
that.filterString("");
// Update the markers
that.updateMarkers();
// Store itself in localStorage
localStorage.setItem("savedPlaces", ko.toJSON(that.savedPlaces()));
});
When I comment out that last line, I get no issue.
I also get no issue if I replace it with: localStorage.setItem("savedPlaces", ko.toJSON([{item: "item"}]));
I tried to give an example of content for items but apparently observableArrays are deep (recursive) objects, making it impossible for me to copy paste for the DevTools console on Chrome. However it looks something like:
[{'marker': a_google_maps_marker_object,
'place': {data: mostly strings...}]
I found the issue.
My observable array contained a Google Maps marker. These are recursive arrays, which cannot be JSONified.
I removed the Google Maps marker from my array and everything was fine.
Still strange though that Knockout throws this cryptic error.

google-map element throws error upon creation

Downvote people: Note that this question is n̲o̲t̲ about Google Maps API V3. <google-map> is a GoogleWebComponent that displays a map automagically upon declaration in dom.
var map = document.createElement("google-map");
By only executing this line, it throws an error saying:
Uncaught TypeError: latitude must be a number
I don't even get a chance to set the latitude property.
Is this because I'm creating multiple google-maps (in different dom-modules) within the same page? If not, why is this happening and how do I solve this?
Added
Even doing something like this still yields the same error:
var map = document.createElement("span");
map.innerHTML = "<google-map latitude='1'></google-map>";

Google Maps Api 3: Uncaught TypeError: Cannot call method 'setCenter' of undefined

I have been trying to get my geocoder working this morning for the following URL but can't seem to figure out what I am doing wrong: http://www.dlplaw.com/media/map.html
When clicking encode, the geocoder is doing it's job and returning the correct Lat / Long coordinates but it gets hung up on setCenter.
Uncaught TypeError: Cannot call method 'setCenter' of undefined
I tried to follow the Google example here and can't understand why this won't work:
http://code.google.com/apis/maps/documentation/javascript/examples/geocoding-simple.html
Thanks in advance.
map is not in scope. You declare map twice – once in the global scope and once in initialize, but you only set the map in initialize (the global map is shadowed).
Remove the var from var map = new google.maps.Map(...); (but not the var map; at the top).

Categories

Resources