开发者问题收集

循环遍历 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