javascript - 循环遍历 JSON 键以添加 Google map 数据

Question

我发现了很多与此类似的问题，但没有一个对我的特定问题有用。基本上，我有一个 AJAX 调用，它获取用户字典及其纬度和经度。

$(function() {
  $.getJSON($SCRIPT_ROOT + '/_userInfo',
  function(data) {
    var userinfo = $("#userinfo").text(data.userinfo);
  });
})

这将返回类似于以下 JSON 的内容:

{
  "userinfo": {
    "bob": [
      40.089158, 
      -88.239035, 
      "at home", 
      null, 
    ], 
    "sarah": [
      40.486545, 
      -89.00478, 
      "at work", 
      null, 
    ], 
    "michael": [
     40.089018, 
     -88.239361, 
     "in class", 
     null, 
    ]
  }
}

我不知道键名是什么，所以我不确定如何放置标记。为了简单地绘制点，我只需要第一个值(纬度)和第二个值(经度)。我尝试过类似的方法，但它不起作用:

var data = [
   for (var i = 0; i < data.userinfo.length; i++){
     new google.maps.LatLng(data.userinfo[i].[0], data.userinfo[i].[1]),
   }
];

map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

heatmap = new google.maps.visualization.HeatmapLayer({
    data: data,
    radius: 20
});

它不会将 userinfo 识别为有效的变量名。我不熟悉 AJAX 的语法，我在 AJAX 调用或 map 数据的 for 循环中做错了什么？

Answer 1

除了数组定义中 for 的语法问题外，问题是因为 userinfo 是一个对象，所以您不能像使用数组那样循环遍历它.

相反，您可以使用 Object.keys 获取属性名称，然后像这样遍历这些名称:

$(function() {
  $.getJSON($SCRIPT_ROOT + '/_userInfo', function(data) {
    var locations = [];
    Object.keys(data.userinfo).forEach(function(key) {
      var user = data.userinfo[key];
      locations.push(new google.maps.LatLng(user[0], user[1])) 
    });

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: locations,
      radius: 20
    });
    heatmap.setMap(map);
  });
})