Member Avatar for ahmed_101

How to return value of longtide and latitude from json using angular 7?

my url as following :

json returned from url above is :

{"_index":"location","_type":"_doc","_id":"27737","_version":1,"_seq_no":5577,"_primary_term":1,"found":true,"_source":{"Locid":27737,"GPS1":"25.0173, 121.462","GPS2":"25°01'02.2\"N 121°27'44.8\"E","CompanyID":1005070,"ads":"142 Sec. 1, HsIn Nan Rd cung Ko Dšst, New Taipei City, Taiwan","Crid":75,"con":"Taiwan","Ctid":5894,"Cn":"Zhonghe District","pushdate":"2019-12-26T03:38:20.883"}}

I need to return two values from GPS1 :

longtiude : 25.0173

latitude : 121.462

Based on LocationId parameter :27737

So that I need to create service

take location id parameters

and return two values of GPS1
Longtude
And
latitude

then set values returned of longtude and latitude

on ngOinInit Event

How to create service then call it on ngOnInit

ngOnInit  
{  
call service here  
}
  • 4 Contributors
  • 3 Replies
  • 1K Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

A few clarifications first: the JSON value "GPS1":"25.0173, 121.462" is almost certainly in the order latitude, longitude (lat first, lon second). That means lat = 25.0173 and lon = 121.462 — confirm which convention your consumers expect before swapping names. This builds on and (generate a service) and addresses 's point about parsing.

Here is a concise Angular (7) service + component usage showing the parsing and how to call it from ngOnInit. Import HttpClientModule in your AppModule.

// location.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class LocationService {
  constructor(private http: HttpClient) {}

  getGps(id: number): Observable<{ lat: number | null; lon: number | null }> {
    const url = `/location/_doc/${id}`; // adjust base URL or proxy as needed
    return this.http.get<any>(url).pipe(
      map(res => {
        const g = res && res._source && res._source.GPS1 ? res._source.GPS1 : '';
        const parts = g.split(',').map(p => p.trim());
        const lat = parseFloat(parts[0]);
        const lon = parseFloat(parts[1]);
        return { lat: Number.isFinite(lat) ? lat : null, lon: Number.isFinite(lon) ? lon : null };
      })
    );
  }
}
// component.ts (usage)
ngOnInit() {
  this.locationService.getGps(27737).subscribe(coords => {
    this.lat = coords.lat;
    this.lon = coords.lon;
  }, err => console.error('GPS load error', err));
}

Troubleshooting notes: guard against missing GPS1, support DMS formats (use a DMS parser if you must parse GPS2), and watch out for locale-specific decimal separators (commas) which break a simple split(',').

Recommended Answers

All 3 Replies

Member Avatar for Andrew107

Did you install angular cli?
If so you could call ng generate service nameofservice to create the service, then do the programming to parse the json object as you need to.
Just have to make sure to look up how to include a service...you have to register it in the app.module.ts...
https://angular.io/tutorial/toh-pt4

Member Avatar for Dani

then do the programming to parse the json object as you need to.

I could be wrong, but I think what he's asking is how to do this part.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.