Question

我有这段代码：

function heatMapRange() {
  var script1 = document.createElement('script');
  script1.src = 'allCoords.js';
  document.getElementsByTagName('head')[0].appendChild(script1);
}

附加上面的allCoords.js文件：

allCoords_callback({
  "coordinates": [
    [50.1729677, 12.6692243, 580000],
    [50.001168, 14.4270033, 2895000],
    [50.6988037, 13.9384015, 945000],
    [50.1218161, 14.4824004, 409900],
    [49.470061, 17.0937597, 1499000],
    [49.8509959, 18.5593087, 380000]
  ]
});

我想要的是用这样的东西迭代这些数据：

function allCoords_callback(results1) {
  for (var i = 0; i < results1.coordinates.length; i++) {
    alert(results1.coordinates[i]);
  }
}

有可能吗？

Answer 1

您可以使用Array.map()在javascript中迭代数组。

在你的例子中将是：

results1.coordinates.map(function(coordinate) { alert(coordinate); })

关于迭代部分。

然后，另一个主题是如何获得需要处理的JSON。在Google Maps docs上给出的示例中，他们使用JSONP执行此操作只是因为这是real-time earthquake data works的方式。另一种获取数据的方法是XMLHttpRequests（AKA as AJAX）。这是一种更常见的做法，如果可能的话我会建议使用它。

在你的情况下，我会重新编写你的代码看起来像这样：

function heatMapRange(){
  var request = new XMLHttpRequest();
  request.open('GET', '/allCoords.js', true);
  request.onload = function () {
    if (request.status >= 200 && request.status < 400) {
      // Success!
      var data = JSON.parse(request.responseText);
      // process the data in the response, like
      // iterating through the list of coordinates
      data.coordinates.map(function(coordinate) { alert(coordinate); })
    } else {
      // We reached our target server, but it returned an error
    }
  }
  request.error = function () {
    // There was a connection error of some sort
  }
  request.send();
}

从JSON文件allCoords.json中获取数据：

{
    "coordinates": [
        [50.1729677,12.6692243,580000],
        [50.001168,14.4270033,2895000],
        [50.6988037,13.9384015,945000],
        [50.1218161,14.4824004,409900],
        [49.470061,17.0937597,1499000],
        [49.8509959,18.5593087,380000]
    ]
}

这种从服务器获取数据的方式更符合行业中使用的最佳实践。这只是使用vanillaJS XMLHttpRequest的直接示例。有大量的库可以简化此操作。更好的是Fetch API即将解决获取资源的问题。

Answer 2

顶部的代码是否有效，问题是我在谷歌浏览器中禁用了警报。因此，关闭选项卡并重新打开页面就可以了。

迭代附加的json文件

2 个答案: