Angular - Leaflet Error: Invalid LatLng object: (undefined, undefined)-CodePudding

i get this error message..

Error: Invalid LatLng object: (undefined, undefined)

So I already tried to console.log the "lon" and the "lat" variable to see if the actual value gets outputted, but the output in the console just says “undefined”.. So I guess there is a problem in how I target the values and because of that leaflet gets 2 undefined objects and gives me that error message. Can someone help me target the objects correctly?

My Service to create map markers looks like this

export class CustomersService {
  customers: string = '../../assets/data/customerdata.json';

  constructor(private http: HttpClient) {}

  makeCustomerMarkers(map: L.Map): void {
    this.http.get(this.customers).subscribe((res: any) => {
      for (const c of res.customerArray) {
        const lon: number = c?.customerAdress?.geoCoord?.longitudeCoord;
        const lat: number = c?.customerAdress?.geoCoord?.latitudeCoord;
        const marker = L.marker([lat, lon]);

        marker.addTo(map);
      }
    });
  }
}

This is the component where i call the service

ngAfterViewInit(): void {
    this.initMap();
    this.customersService.makeCustomerMarkers(this.map);
  }

And this is my data

{
  "customerArray": [
    {
      "customerAddress": {
        "country": "Deutschland",
        "geoCoord": {
          "longitudeCoord": 10.4477,
          "latitudeCoord": 51.1634
        }
      },
      "phone": "0145221551",
      "eMail": "[email protected]",
      "homepage": "www.google.de"
    },
    {
      "customerAddress": {
        "country": "Deutschland",
        "geoCoord": {
          "longitudeCoord": 10.4477,
          "latitudeCoord": 51.1634
        }
      },
      "phone": "0145221551",
      "eMail": "[email protected]",
      "homepage": "www.google.de"
    },
    {
      "customerAddress": {
        "country": "Deutschland",
        "geoCoord": {
          "longitudeCoord": 10.4477,
          "latitudeCoord": 51.1634
        }
      },
      "phone": "0145221551",
      "eMail": "[email protected]",
      "homepage": "www.google.de"
    }
  ]
}

CodePudding user response：

Seems caused by a simple typo: customerAdress in your code but customerAddress (note the 2x d) in your JSON data.

I encourage you to type your data, it will definitely help you avoid such trivial mistakes:

interface Customer {
  customerAddress: {
    geoCoord: {
      longitudeCoord: number;
      latitudeCoord: number;
    }
    // etc.
  }
  // etc.
}

interface ResultCustomers {
  customerArray: Customer[];
}

this.http.get("url").subscribe((res: ResultCustomers) => {
  for (const c of res.customerArray) {
    // Now `c` is recognized as a `Customer`
    // and TypeScript can detect typos
    c?.customerAdress; // Error
  }
});

As a general rule, avoid as much as possible typing as any: while it is faster in the short term not having to bother with missing types, it will help you in the long run (here typically it could have saved you all the debugging time).

You can validate that your JSON data actually matches your interfaces (in case you have made some typo in there...) by copy-pasting a sample of that data in your TS file and trying to type it:

const dataSample: ResultCustomers = {
  "customerArray": [
    {
      "customerAddress": {
        "country": "Deutschland",
        "geoCoord": {
          "longitudeCoord": 10.4477,
          "latitudeCoord": 51.1634
        }
      },
      "phone": "0145221551",
      "eMail": "[email protected]",
      "homepage": "www.google.de"
    },
  ]
};

In case you have a lot of such JSON data to be typed, there are some tools that can help you automate the conversion to TypeScript interfaces.

Some examples: