Блог

Добрый день всем.

У меня есть небольшое веб-приложение, которое использует API для отображения велосипедных станций на карте.

Я использую этот Bike API

Это моя карта — Листовка Maps

Проблема: в настоящее время я выбираю только один API и беру только несколько параметров из JSON ответа. Но мне нужно также получить другой API и взять из него только 2 параметра.

Вот как выглядит мой код в настоящее время —

 import "./styles.css";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

const icon = L.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: "https://unpkg.com/leaflet@1.6/dist/images/marker-icon.png",
  shadowUrl: "https://unpkg.com/leaflet@1.6/dist/images/marker-shadow.png"
});

var map = L.map("map", {
  preferCanvas: true
}).setView([51.505, -0.09], 3);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    'amp;copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


fetch("https://gbfs.urbansharing.com/oslobysykkel.no/station_information.json")
  .then((responseOne) => responseOne.json())
  .then((responseDataOne) => {
    console.log(responseDataOne.data);
    const stations = responseDataOne.data.stations;

    const layerGroup = L.featureGroup().addTo(map);

    stations.forEach(({ lat, lon, name, address}) => {
      layerGroup.addLayer(
        L.marker([lat, lon], { icon }).bindPopup(
          `${name}, 
           ${address}`
        )
      );
    });

    map.fitBounds(layerGroup.getBounds());
  });
  

Как вы можете видеть из этого API, я вынимаю name и address из места

Мне нужно использовать этот API — https://gbfs.urbansharing.com/oslobysykkel.no/station_status.json и меня интересуют только эти конкретные параметры (из документов).

 {
 "num_bikes_available": 7,
 "num_docks_available": 5,
},
  

Как я могу многократно извлекать API и получать данные из обоих API и объединять их вместе, чтобы в итоге у меня было что-то вроде

 ...
L.marker([lat, lon], { icon }).bindPopup(
      `${name}, 
       ${address},
       ${num_bikes_available},
       ${num_docks_available}`
    )
...
  

Вам нужно использовать Promise.all для достижения вашей цели следующим образом:

 Promise.all([
  fetch(
    "https://gbfs.urbansharing.com/oslobysykkel.no/station_information.json"
  ),
  fetch("https://gbfs.urbansharing.com/oslobysykkel.no/station_status.json")
]).then(async ([response1, response2]) => {
  const responseData1 = await response1.json();
  const responseData2 = await response2.json();

  const data1 = responseData1.data.stations;
  const data2 = responseData2.data.stations;

  // console.log(data1, data2);

  const layerGroup = L.featureGroup().addTo(map);

  data1.forEach(({ lat, lon, name, address, station_id: stationId }) => {
    layerGroup.addLayer(
      L.marker([lat, lon], { icon }).bindPopup(
        `<b>Name</b>: ${name}
        <br/>
        <b>Address</b>: ${address}
        <br/>
       <b>Number of bikes available</b>: ${
         data2.find((d) => d.station_id === stationId).num_bikes_available
       }
    <br/>
   <b>Number of docs available</b>: ${
     data2.find((d) => d.station_id === stationId).num_docks_available
   }
        `
      )
    );
  });

  map.fitBounds(layerGroup.getBounds());
});
  

Сначала вы извлекаете оба запроса. Когда поступают ответы, вы перебираете данные первого запроса. Используя station_id , вы можете извлечь данные ответа на запрос второго num_bikes_available num_docks_available и добиться желаемого поведения.

ДЕМОНСТРАЦИЯ

Не уверен, что это самый эффективный способ, но разве вы не можете просто выполнить вторую выборку в своем last .then() и написать функцию для объединения 2 данных, которые вы только что извлекли

итак:

 fetch("https://gbfs.urbansharing.com/oslobysykkel.no/station_information.json")
  .then((responseOne) => responseOne.json())
  .then((responseDataOne) => {
    console.log(responseDataOne.data);
    const stations = responseDataOne.data.stations;
    fetch("https://secondapi").then((data) => {
      //write function to merge the 2
    
    const layerGroup = L.featureGroup().addTo(map);

    mergedArray.forEach(({ lat, lon, name, address}) => {
      layerGroup.addLayer(
        L.marker([lat, lon], { icon }).bindPopup(
          `${name}, 
           ${address}`
        )
      );
    });

    map.fitBounds(layerGroup.getBounds());
 })
  });
  

Кроме того, в настоящее время я сам работаю над проектом листовки, и я должен сказать, что если вы используете ReactJS для создания своего веб-сайта, react-leaflet действительно полезен