如何过滤一些看起来非常复杂的JSON数据并将其用于传单.js中的标记

How can I filter some very complicated looking JSON data and use it for markers in leaflet.js?

本文关键字:用于 js 数据 JSON 过滤 复杂 非常 看起来 何过滤      更新时间:2023-09-26

我从德克萨斯州奥斯汀的公共数据集中获取数据。这是过滤后的原始数据,可以下载我想使用的 .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