Как получить доступ к вложенному объекту json и отобразить маркеры с помощью карты на листовке с условным отображением маркера

Question

Это мои данные json из API:

{"datapoint":[{"id":"H0031","In_time":{"date":"2017-10-24 10:41:17.783000"},"lat1":"24.55","long1":"71.75","lat2":"27.715186","long2":"83.323999"}]}

Я хочу перебрать дату и отобразить несколько маркеров.

Вот мой полный код:

fetch('http://www.example.com/?qty=10')
        .then((response) => response.json())
        .then((response) => {
            let datapoint = response.datapoint;
            for (let i=0; i<datapoint.length; i++) {

                let hlat = parseFloat(datapoint[i]["lat1"]);
                let hlon = parseFloat(datapoint[i]["long1"]);
                let glat = parseFloat(datapoint[i]["lat2"]);
                let glon = parseFloat(datapoint[i]["long2"]);
                let markerLocation1 = new L.LatLng(hlat, hlon);
                let marker1 = new L.marker(markerLocation1,{icon: greenIcon});
                marker1.addTo(map).bindPopup(popup,customOptions);
                let markerLocation2 = new L.LatLng(glat, glon);
                let marker2 = new L.marker(markerLocation2,{icon: BlueIcon});
                marker2.addTo(map).bindPopup(popup,customOptions);
                var latlngs=[];
                let latlng1=[hlat,hlon];
                let latlng2=[glat,glon];
                var offsetX=latlng2[1]-latlng1[1];
                var offsetY=latlng2[0]-latlng1[0];
                var r=Math.sqrt(Math.pow(offsetX,2)+Math.pow(offsetY,2)), theta = Math.atan2(offsetY,offsetX);
                var thetaoffset=(3.14/10);
                var r2 = (r/2)/(Math.cos(thetaoffset)),
                    theta2 = theta + thetaoffset;
                var midpointX = (r2 * Math.cos(theta2)) + latlng1[1],
                    midpointY = (r2 * Math.sin(theta2)) + latlng1[0];

                var midpointLatLng = [midpointY, midpointX];

                latlngs.push(latlng1, midpointLatLng, latlng2);
                var pathOne = L.curve(['M',latlng2,'Q',midpointLatLng,latlng1], {snakeArray: 5, color:'grey' ,animate: {duration: 2500, iterations: 2}}).addTo(map);

            }

        })

............................................... .................................................. .............................................

Answer 1

Я обновил свой ответ, чтобы продемонстрировать вам пример на примере API.

Я создал дополнительный файл с именем data.geojson для хранения геоджона, чтобы имитировать URL-адрес API:

{
  "datapoint": [{
      "id": "H0031",
      "In_time": {
        "date": "2017-10-24 10:41:17.783000"
      },
      "lat1": "24.55",
      "long1": "71.75",
      "lat2": "27.715186",
      "long2": "83.323999"
    },
    {
      "id": "H0032",
      "In_time": {
        "date": "2017-10-25 10:41:17.783000"
      },
      "lat1": "28.55",
      "long1": "74.75",
      "lat2": "29.715186",
      "long2": "88.323999"
    }
  ]
}

Код JS:

let geojson;
// instead of data.geojson you will place your API url
$.getJSON("data.geojson", function(data) {
  geojson = data;
  const dataPoint = geojson.datapoint;

  // store all the coordinates in this array o be able to iterate over the markers array
  let coordinates = [];

  // populate coordinates array with all the markers
  for (let i = 0; i < dataPoint.length; i++) {
    coordinates.push([Number(dataPoint[i].lat1), Number(dataPoint[i].long1)], [Number(dataPoint[i].lat2), Number(dataPoint[i].long2)]);
  };
  // console.log(coordinates);

  // visualize the markers on the map
  for (let i = 0; i < coordinates.length; i++) {
    L.marker(coordinates[i]).addTo(map)
      .bindPopup("<b>Latitude:</b> " + coordinates[i][0] + " <b>Longitude:</b> " + coordinates[i][1]);
  };
});

Демо