循环浏览 JSON 密钥以添加 Google 地图数据

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 调用或映射数据的 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);
});
})