Javascript 使用正确的数据获取多个API

大家下午好

我有一个小的web应用程序，它使用API在地图上显示自行车站

我在用这个

这是我的地图-

问题：目前我只获取一个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:
    '&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中提取多个API数据并将它们合并在一起，最终我将得到如下结果

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

---

不确定这是否是最有效的方法，但您能否在最后一个.then（）中进行第二次提取，并编写一个函数来合并刚刚提取的两个数据

因此：

---

另外，我自己目前正在做一个宣传单项目，我必须说，如果您使用ReactJs来构建您的网站，这真的很有帮助

您需要使用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());
});

Promise.all([
取回(
"https://gbfs.urbansharing.com/oslobysykkel.no/station_information.json"
),
取回（“https://gbfs.urbansharing.com/oslobysykkel.no/station_status.json")
])。然后（异步（[response1，response2]）=>{
const responseData1=wait response1.json（）；
const responseData2=wait response2.json（）；
const data1=responseData1.data.stations；
const data2=responseData2.data.stations；
//console.log（数据1、数据2）；
常量layerGroup=L.featureGroup（）.addTo（映射）；
data1.forEach（{lat，lon，name，address，station\u id:stationId}）=>{
layerGroup.addLayer(
L.标记（[lat，lon]，{icon}）.bindPopup(
`名称：${Name}


地址：${Address}


可用自行车数量：${
数据2.find（（d）=>d.station\u id===stationId）.num\u bikes\u可用
}


可用文档数：${
数据2.find（（d）=>d.station\u id===stationId）.num\u docks\u可用
}
`
)
);
});
map.fitBounds（layerGroup.getBounds（））；
});

您首先获取两个请求。当响应到达时，您循环第一个请求数据。使用

站点id

可以从第二个站点的请求-响应数据

num\u bikes\u available

和

num\u docks\u available

中提取，并实现所需的行为

---

谢谢你的建议。我目前没有使用react，但也许它对我来说也是一个更简单的解决方案！谢谢

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());
 })
  });

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());
});