javascript - javascript中数组格式的数组

Question

我正在尝试修复我的代码中的这个错误，但我无法在任何地方找到解决方案，所以它让我发疯。我放弃自己尝试，并会向这里的每个人征求意见。

我正在用javascript制作一个简单的ISS跟踪器作为初学者练习。从 API 获取位置并使用 Leaflet.js 将其绘制在地图上

现在我坚持绘制一条折线，因为我无法以正确的格式返回一个纬度数组，我不明白为什么。

所以我有一个异步 getISS() 函数，它在地图上绘制当前位置（工作正常）并返回当前时间戳。然后我有另一个异步函数 getISS_at_time() 返回指定时间戳的 lat,lng 位置。但有问题。我需要将所有 [lat, lng] 位置放入一个数组中以将其提供给 L.polyline 函数，但我不明白如何。

async function getISS_at_time(timestamp) {
    const api_url =
      "https://api.wheretheiss.at/v1/satellites/25544/positions?timestamps=" +
      timestamp;

    const res = await fetch(api_url);
    const data = await res.json();
    const lat = data[0].latitude;
    const lng = data[0].longitude;
    const json_data = '{"lat":' + lat + ', "lng": ' + lng + "}";

    return JSON.parse(json_data);
  }

  async function getISS() {
    const result = await fetch(api_url);
    const data = await result.json();
    const position = [data.latitude, data.longitude];

    marker.setLatLng(position);
    iss_map.setView(position, 2);

    return data.timestamp;
  }

  getISS().then((timestamp) => {
    let start = timestamp - 45 * 60;

    for (let i = 0; i < 3; ++i) {
      timestamp = start + 60 * i;

      var positions = [];
      getISS_at_time(timestamp).then((pos) => {
        //here i'm getting the lat, lng position and trying to put it in a new array
        positions[i] = [pos.lat, pos.lng];
      });
    }
    // this is a test var with a correct array format to feed to the polyline function
    var latlngs = [
      [38.91, -77.07],
      [37.77, -79.43],
      [39.04, -85.2],
    ];
    console.log(Array.isArray(positions[0]));  // returns false
    console.log(positions); // looks exactly the same as console.log(latlngs) in the Chrome console (see img)
    console.log(Array.isArray(latlngs[0])); // returns true
    console.log(latlngs);

    // works fine
    var poly = L.polyline(latlngs, { color: "red" }).addTo(iss_map);
    // draws nothing!
    var poly = L.polyline(positions, { color: "red" }).addTo(iss_map);
  });

我也尝试过positions.push(pos)而不是positions[i] = pos但没有成功

标签： javascriptarrays

Answer 1

您的代码正在访问positions，而无需等待承诺（由 返回getISS_at_time）得到解决。

以下是您可以解决的方法：

getISS().then((timestamp) => {
    let start = timestamp - 45 * 60;

    return Promise.all(Array.from({length: 3}, (_, i) => {
        return getISS_at_time(start + 60 * i).then((pos) => [pos.lat, pos.lng]);
    }));
}).then(positions => {
    console.log(Array.isArray(positions[0]));
    console.log(positions);
    var poly = L.polyline(positions, { color: "red" }).addTo(iss_map);
    // ... more code working on this data
});

由于您已经使用async await语法，您还可以使用立即调用的async函数来执行相同的操作：

(async function () {
    let timestamp = await getISS();
    let start = timestamp - 45 * 60;
    let positions = await Promise.all(Array.from({length: 3}, async (_, i) => {
        let pos = await getISS_at_time(start + 60 * i);
        return [pos.lat, pos.lng];
    }));
    console.log(Array.isArray(positions[0]));
    console.log(positions);
    var poly = L.polyline(positions, { color: "red" }).addTo(iss_map);
    // ... more code working on this data
})(); // immediately invoked

其他备注

用字符串连接构造 JSON 格式是非常糟糕的做法：

const json_data = '{"lat":' + lat + ', "lng": ' + lng + "}";
return JSON.parse(json_data);

相反，只需构造对象——您甚至可以为此使用快捷的对象文字语法：

return { lat, lng };