如何过滤一些看起来非常复杂的JSON数据并将其用于传单.js中的标记
How can I filter some very complicated looking JSON data and use it for markers in leaflet.js?
我从德克萨斯州奥斯汀的公共数据集中获取数据。这是过滤后的原始数据,可以下载我想使用的 .json 格式......
https://data.austintexas.gov/dataset/New100/4ehx-iwqv
现在,我已经弄清楚了如何使用 .json 文件来创建标记,但我在 .json 文件中有太多数据,这比我需要制作的所有 165 个要花费的时间要多得多。如何过滤,以便 .leaflet 标记仅使用我需要的信息?我特别需要过滤名称、纬度和经度。
我不熟悉 leaf.js,但听起来你想拿一个 json 文件并修剪其每个对象的内容。如果是这种情况,我会编写一个脚本来加载 json 文件,通过逐个循环遍历每个对象来过滤掉不需要的属性,然后将内容写入新的 json 文件。
您可以使用任何您想要的编程语言。Python有一个很好的json模块:https://docs.python.org/2/library/json.html
这实际上没有看起来那么复杂。在对象中,您有两个主要属性:meta
& data
。数据是一个数组,其中包含具有不同位置的数组及其相应的数据。只需计算您需要哪些数组项,您需要八个元素,它包含名称。第 12 个元素包含坐标位于位置 1 和 2 的数组。最好用一些代码解释:
// Your data url
var url = 'https://data.austintexas.gov/api/views/4ehx-iwqv/rows.json';
// Fetch the JSON with XHR (Using jQuery here)
$.getJSON(url, function (response) {
// Loop over the data array
response.data.forEach(function (item) {
// create new object
var data = {
// Array element 8 contains the name
'name': item[8],
// Array element 12 contains address array
'latitude': item[12][1], // Element 1 in address, the latitude
'longitude': item[12][2] // Element 2 in address, the longitude
};
// Create marker with latitude and longitude from data object
var marker = L.marker([
data.latitude,
data.longitude
]);
// Bind popup with name properties of data object
marker.bindPopup('<h4>' + data.name + '</h4>');
// Add marker to map
marker.addTo(map);
});
});
以下是Plunker上的一个工作示例: http://plnkr.co/edit/fe7YKE?p=preview
相关文章:
- Gulp:如何将CDN用于js-lib
- Mailchimp内联表单验证不适用于JS加载的HTML
- 代码不适用于JS Fiddle
- 相同的 md5 用于 JS 和 PHP
- IE不将CSS应用于JS,适用于Chrome / FF
- 使用变量“name”不适用于JS对象
- 高度设置为“自动”不适用于 JS 动画
- 用于 JS / Cordova 应用程序的盒式 api
- 具体化 css 选择不适用于 JS 错误
- 用于JS'未配置访问'错误
- 将点击/悬停函数应用于JS中的多个元素类
- jQuery只适用于HTML文件,不适用于JS文件
- 如何将这些相同的CSS规则应用于JS
- 图像资产可用于CSS文件,但不适用于JS文件 - 为什么
- 将CSS类用于JS标记是一种糟糕的做法
- 什么方法可以用于JS中具有依赖关系的可遍历树?
- 多个$this属性用于JS中可重用的类
- 将时区偏移应用于js代码
- 在<头部>也适用于JS
- 一天中某个时间的颜色变化不适用于Js