post - Angular geolocation becomes empty

Question

I'm trying to bind my geolocation with a picture and send it to my backend (in Angular). I get correctly the geolocation but when I make the POST call, the geolocation becomes empty in the body request. HOW/WHY TF?

Here is an example of my problem: https://stackblitz.com/edit/angular-nbrov5 (maybe need to open it 'live' to have geolocation working https://angular-nbrov5.stackblitz.io/ )

makeCall() {
   navigator.geolocation.getCurrentPosition(position => {
     console.log("My position is ", position);
     let postObject = {
       position: position,
       positionJSONified: JSON.parse(JSON.stringify(position)),
       latitude: position.coords.latitude,
       longitude: position.coords.longitude,
       nested: { toto: 1234, tata: { tutu: "hello" } }
     };
     this.httpClient
       .post("https://anyurl.com", postObject)
       .subscribe(console.log);
   }, console.error);
 }

I got the geolocation correctly:

but is empty (not null) in POST:

This isn't be a backend-server issue because this happens in the POST Call, not in the response. Looks like this is a reference issue. Therefore I tried the old JSON.parse/JSON.stringify and the spread operator but even this, the location remains empty. Hints? The geolocation content is readonly. Is this for security purposes?

question from:https://stackoverflow.com/questions/65882595/angular-geolocation-becomes-empty

Answer 1

Try this

makeCall() {
   navigator.geolocation.getCurrentPosition(position => {
     const positionObject= { coords: position.coords, timestamp: position.timestamp };
     let postObject = {
       position: positionObject,
       positionJSONified: JSON.parse(JSON.stringify(positionObject)),
       latitude: position.coords.latitude,
       longitude: position.coords.longitude,
       nested: { toto: 1234, tata: { tutu: "hello" } }
     };
     this.httpClient
       .post("https://anyurl.com", postObject)
       .subscribe(console.log);
   }, console.error);
 }