Leaflet: Неверный объект LatLng: (не определено, не определено)

Question

Я пытаюсь получить ключи объектов из URL JSON API, данные по широте и долготе с сервера. Содержимое данных json api на ключах объектов и эти ключи постоянно меняются. Я хочу получить только координаты внутри этих ключей объекта и добавить их в маркер листовки карты в виде массива, а затем показать на карте. Но проблема в том, что у меня есть Error: Uncaught (in promise): Error: Invalid LatLng object: (undefined, undefined)

  //coords
  points: Array<any> = [];

  // short data json
   data =[
{

  "22a7f183": [
    "502F0C",
    56.9227,
    23.9790,
    16,
    0,
    0,
    "0000",
    "T-EVRA43",
    "",
    "",
    1573389319,
    "RIX",
    "",
    "",
    1,
    0,
    "GPSMONT",
    0,
    ""
  ],
}]

  MarkerMap() {      

      this.points = Object.keys(this.data)
      .map(key => this.data[key])
      .map((position) => ({
        lat: position[1],
        lng: position[2]
      }));
      this.points.forEach((point) => {

        L.marker([point.lat,point.lng]).addTo(globalMap)
        .bindPopup('Ionic 4 <br> Leaflet.')
        .openPopup();
        console.log(point.lat,point.lng)


      });
    }

Кроме того, как я могу избежать массива пустых объектов внутри?

Живой код

Answer 1

Какой у вас источник данных? Может быть, некоторые записи не имеют координат? Вы проверяли это?

Если у вас есть неполные элементы в массиве, вы можете отфильтровать массив, используя метод filter:

this.points = Object.keys(this.data)
  .map(key => this.data[key])
  .map((position) => ({
    lat: position[1],
    lng: position[2]
  }))
  .filter(position => position.lat && position.lng);

Кроме того, вы должны проверить, что ваши координаты являются числами.