core.js:15723 ERROR TypeError: Cannot read property 'OBJECT' of undefined

1
votes

I have problem when I try to execute this fuction. All what I try to do is to recevie from api of google the lat long of addrss.

I get this err:

core.js:15723 ERROR TypeError: Cannot read property 'geometry' of undefined
at SafeSubscriber._next (coupon.service.ts:25)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)

the api returns this json :

https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyBdVIF79ozR1oWiMo4Pdn1I4ReepZ0azHI

this is the serve that contains the function that gets the "long lat" from the api :

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { ApiResulte } from '../model/latlong.model';

@Injectable({
  providedIn: 'root'
})
export class CouponService {

  public myApi:ApiResulte;
  public lat:Number;
  public lng:Number;


  constructor(private myHttpClient:HttpClient) { 
    this.getLngLat();
  };

  public getLngLat(){
    this.myHttpClient.get<ApiResulte>('https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyBdVIF79ozR1oWiMo4Pdn1I4ReepZ0azHI').subscribe(
      res=>{
        this.myApi=res
        this.lat = this.myApi.results[1].geometry.viewport.northeast.lat;
        this.lng = this.myApi.results[1].geometry.viewport.northeast.lng;
      },
      err=>{console.log(err)}
    );
  };
};

The componenta that use in the service :

  import { Component, OnInit } from '@angular/core';
import { CouponService } from '../shered/services/coupon.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {


  constructor(public myService:CouponService) { }


  ngOnInit() { }

}

This the html part that display the lng lat :

<p >
  The lat is: {{myService.lat}}<br>
  The long is: {{myService.lng}}
</p>

What am I doing wrong?

2
htmljsonangulartypescript

2 Answers

0
votes

It's because your api returns array which has only one value. But You are trying to access second index of the array by giving this.myApi.results[1] which is not there actually. Array index always starts with 0 not 1.I hope this will solve your problem.

    this.myApi=res
    this.lat = this.myApi.results[0].geometry.viewport.northeast.lat;
    this.lng = this.myApi.results[0].geometry.viewport.northeast.lng;
0
votes

Here Google API returning a single object in an array. Array index start from 0 so access array this.myApi.results[0]. Please replace the below method to solve your issue.

  public getLngLat(){
    this.myHttpClient.get<ApiResulte>('https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyBdVIF79ozR1oWiMo4Pdn1I4ReepZ0azHI').subscribe(
      res=>{
        this.myApi=res
        this.lat = this.myApi.results[0].geometry.viewport.northeast.lat;
        this.lng = this.myApi.results[0].geometry.viewport.northeast.lng;
      },
      err=>{console.log(err)}
    );
  };

Hope this help!