How to get values from Object in Angular?

Question

I have a project where I get location data from API (opencagedata):


export class LocationComponent implements OnInit {

  longitude: number;
  latitude: number;
  location: Object;
  name: String;


  constructor(private _http: HttpService) { }

  ngOnInit(): void {

    navigator.geolocation.getCurrentPosition((position) =>{
      this.latitude = position.coords.latitude;
      this.longitude = position.coords.longitude;
      this._http.getLocation(this.latitude, this.longitude).subscribe(data => {
        this.location = data;
        console.log(this.location);
      })
    })
  }

}

And in console I can see my data displayed but I want to have the name of the city in variable name.

I have tried:

this.name = this.location.results[0].components.city

but it doesn't work because of an error that method results doesn't exists on type 'Object'. Any suggestions?

console.log(data) outputs:

location.component.ts:28 {documentation: "https://opencagedata.com/api", licenses: Array(1), rate: {…}, **results: Array(1)**, status: {…}, …}documentation: "https://opencagedata.com/api"licenses: [{…}]rate: limit: 2500remaining: 2496reset: 1583884800__proto__: Objectresults: [{…}]status: {code: 200, message: "OK"}stay_informed: {blog: "https://blog.opencagedata.com", twitter: "https://twitter.com/opencagedata"}thanks: "For using an OpenCage API"timestamp: {created_http: "Tue, 10 Mar 2020 16:08:09 GMT", created_unix: 1583856489}total_results: 1__proto__: Object
temp1
{documentation: "https://opencagedata.com/api", licenses: Array(1), rate: {…}, results: Array(1), status: {…}, …}

And the data I need are in the array results.

The method getLocation() that is in file http.service.ts

getLocation(longitude, latitude) {
    return this.http.get('https://api.opencagedata.com/geocode/v1/json?key=(i have my key here)&q='+longitude+"+"+latitude+'&pretty=1')
  }

"It doesn't work" isn't a valid problem statement. Have you tried troubleshooting the problem? — Robert Harvey
– Robert Harvey, Commented Mar 10, 2020 at 15:59
Where did you put the this.name = this.location.results.city ? — Emilien
– Emilien, Commented Mar 10, 2020 at 16:00

Emilien · Accepted Answer · 2020-03-10 16:22:47Z

1

According to what I've read in Open Cage Documentation, you don't have the good format.

Could you try with :

this._http.getLocation(this.latitude, this.longitude).subscribe(data => {
  this.location = data;
  this.name = data.results[0].components.city;
})

On their documentation, Reverse Geocoding return this JSON :

{ 
  // Others objects or properties
  "results" : [
    {
      // Others objects or properties
      "components" : {
        "ISO_3166-1_alpha-2" : "NA",
        "ISO_3166-1_alpha-3" : "NAM",
         "_category" : "commerce",
         "_type" : "restaurant",
         "city" : "Swakopmund", // <-- Here is what you want
         "continent" : "Africa",
         "country" : "Namibia",
         "country_code" : "na",
         "restaurant" : "Beryl's Restaurant",
         "road" : "Woermann St",
         "state" : "Erongo Region",
         "suburb" : "Central"
       },
     }
  ],
  "total_results" : 1
}

edited Mar 10, 2020 at 16:22

answered Mar 10, 2020 at 16:12

Emilien

2,7534 gold badges17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

gg123 Over a year ago

I get an error "Property 'results' does not exist on type 'Object'."

Emilien Over a year ago

@user11377595 You're working with reverse geocoding ? or forward geocoding ?

gg123 Over a year ago

reverse gecoding

gg123 Over a year ago

Yes I get that kind of result, but I can't acces it with the code you written because of an error.

Emilien Over a year ago

@user11377595 Try to change your types like this location: any; and name: string (lowercase)

|

Collectives™ on Stack Overflow

How to get values from Object in Angular?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related