Cannot find a differ supporting object '33.265625' of type 'number'

manpreet Best Answer 2 years ago

I have a Ionic App using google maps. I am trying to get latitude and longitude from data json api for flight route and that data json api then inject that data to Google Maps polyline . Fetch data json api working fine without problem , but when l put objects inside Google Maps l get error Error: Cannot find a differ supporting object '33.265625' of type 'number'. NgFor only supports binding to Iterables such as Arrays. l use forEach to move through the array .

my code :

 async getmarker(){
    this.http.get('/v1/flightjson?flightId=201',{},{})
    .then( data=>{

      // this.latitude = JSON.parse(data.data).result.response.data.flight.track.latitude
      // this.longitude = JSON.parse(data.data).result.response.data.flight.track

      for(let datas of JSON.parse(data.data).result.response.data.flight['track']) {
        this.longitude = datas.longitude
        this.latitude  = datas.latitude

        console.log(this.longitude)
        // Do something.
      }



    })

  }

  loadMap() {
    let AIR_PORTS = [
      this.latitude,
      this.longitude
    ];

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

    let polyline: Polyline = this.map.addPolylineSync({
      points: AIR_PORTS,
      color: '#AA00FF',
      width: 10,
      geodesic: true,
      clickable: true  // clickable = false in default
    });

    polyline.on(GoogleMapsEvent.POLYLINE_CLICK).subscribe((params: any) => {
      let position: LatLng = params[0];

      let marker: Marker = this.map.addMarkerSync({
        position: position,
        title: position.toUrlValue(),
        disableAutoPan: true
      });
      marker.showInfoWindow();
    });
  }

my data json url

html

  <div id="map_canvas">div>

manpreet 2 years ago

for(let datas of JSON.parse(data.data).result.response.data.flight['track']) {
    this.longitude = datas.longitude
    this.latitude  = datas.latitude
}

In above for loop, I assume this.longitude and this.latitude will be arrays. You should pushelements inside this.longitude and this.latitude (as shown below), instead of replacing previous value.

this.longitude.push(datas.longitude);
this.latitude.push(datas.latitude);

You may be using these variables to iterate through different points on the map, as they are plain numbers, ngFor will throw an error saying that content inside ngFor should be iterable. Array is an iterable whereas number is not.