angular - Loop json objects keys to add Google Maps data

Question

I have ionic app using angular . l am trying to get objects from JSon API url , content on latitude and longitude from server . The data json api content on Object keys and those keys are change all time . l want to get only the coordinates inside of those Object keys and add it to google map marker to shows on map .

my code

    export class HomePage implements OnInit {
      point:any
      Data :any
      map: GoogleMap;



      constructor(private http : HTTP) {}


      ngOnInit(){

        this.getData()

      }

   //// Getting json response //// 

      getData(){

        this.http.get("xxxxxxx", {}, {}).then(data =>{

        this.Data = JSON.parse(data.data)


        this.point= Object.keys(this.Data).map(key => this.Data[key].airport.position).map(({
          latitude,
          longitude
         }) => ({
          lat: latitude,
          lng: longitude
         }))
         console.log(this.point)



        }).then(()=>{

          this.loadMap()
        })
      }


      //// inject coordinates into google map ////

      loadMap() {

    this.map = GoogleMaps.create('map_canvas');



        ////// icon marker here ////

        let marker: Marker = this.map.addMarkerSync({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: this.point
        });


      }


    }

short Json

  {
  "ABQ": {
    "airport": {
      "name": "Albuquerque International Airport",
      "code": {
        "iata": "ABQ",
        "icao": "KABQ"
      },
      "position": {
        "latitude": 35.040218,
        "longitude": -106.609001,
        "altitude": 5355
      }
    }
  },
  "ACE": {
    "airport": {
      "name": "Lanzarote Airport",
      "code": {
        "iata": "ACE",
        "icao": "GCRR"
      },
      "position": {
        "latitude": 28.945459,
        "longitude": -13.6052,
        "altitude": 47
      }
    }
  }
}

FULL Json url

when l run my app l got nothing on map no markers at all , also no errors shows in console .

Google map plugin doc

Answer 1

The issue with point variable beacause it is an array of point details. You have to add all markers one by one and here I am indicating the exact place where you have the issue.

let marker: Marker = this.map.addMarkerSync({
    title: 'Ionic',
    icon: 'blue',
    animation: 'DROP',
    position: this.point    // issue in here because trying to make the position by an array
});

The solution is to define a function to add markers by going through each point in point array and I am renaming it to points for the solution because it is meaningful.

// You can use forEach as well on points
for(var i = 0; this.points.length; i++){
    addMarker(points[i]);
}

addMarker(point: any){
    return this.map.addMarkerSync({
        title: 'Ionic',
        icon: 'blue',
        animation: 'DROP',
        position: point
    });
}

Full code is updated as follows,

import { HttpClient } from '@angular/common/http';

export class HomePage implements OnInit {

      points: Array<any> = [];
      Data: any;
      map: GoogleMap;

      constructor(private http: HttpClient) { }

      ngOnInit() {
        this.loadMap();
        this.getData();
      }

      loadMap() {
        this.map = GoogleMaps.create('map_canvas');
      }

      getData() {
        this.http.get("<URL>").
          subscribe((data) => {
            this.Data = JSON.parse(data.data);
            this.points = Object.keys(this.Data)
              .map(key => this.Data[key].airport.position)
              .map((position) => ({
                lat: position.latitude,
                lng: position.longitude
              }));
            this.points.forEach((point) => {
              this.addMarker(point);
            });
          });
      }

      addMarker(point: any) {
        return this.map.addMarkerSync({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: point
        });
      }   

}