循环遍历 JSON 对象并将其转换为数组
2017-08-08
481
我尝试使用 leaflet.js 和 leaflet.heat 从我拥有的 JSON 格式数据构建热图。到目前为止,我已经能够使用 jQuery 的 getJSON 获取和解析我的 JSON 文件,但我卡在了循环遍历文件并返回 leaflet.heat 数组的部分,该数组需要在 leaflet 之上构建热图层。
根据 leaflet.heat 的文档,我需要传递给库的只是一个像这样构造的数组:
[latitude, longitude, intensity]
我的 JSON 如下所示:
[{"Lat":"39.51","Long":"-76.164","Intensity":"0.0017980221756068300"},
{"Lat":"39.463","Long":"-76.12","Intensity":"0.0332634102487264000"},
...more data...]
这是我的代码:
$.getJSON( 'data.json',
function(data){
var heat = L.heatLayer(data, {radius: 25}).addTo(map);
});
});
当我运行它时,出现以下错误:
TypeError: null is not an object (evaluating 't.lat')
我认为这是由于当库需要一个没有键的 数组 时传递了一个 JSON 对象 造成的。我查看了 这个类似的 SO 问题 ,但当我使用此代码将输出记录到控制台时,
var arr = $.map(data, function(el) { return el });
console.log(arr);
...它仍然作为带有键的对象输出。不确定我做错了什么。
2个回答
我认为应该可以解决问题:
var arr = data.map(function(el) {
return [+el.Lat, +el.Long, +el.Intensity];
});
map
每次为您提供数组中的每个元素,并允许您对其进行转换。
每个元素看起来像
{"Lat":"39.51","Long":"-76.164","Intensity":"0.0017980221756068300">
,并且您想将其转换为
[39.51, -76.164, 0.0017980221756068300]
。您可以使用
.Lat
、
.Long
和
.Intensity
来获取每个值,前面的
+
将值从字符串转换为数字。
user94559
2017-08-08
其实你不需要手动解析它。现代浏览器支持 JSON 反序列化:
var json_string = file.read("filename");
var json_to_array = JSON.parse( json_string );
Jay Nguyen
2017-08-08