如何在json数据中显示值答案

【问题标题】：How to show values in json data如何在json数据中显示值
【发布时间】：2020-11-29 02:04:21
【问题描述】：

想知道是否有人可以帮助我处理一些 JavaScript。

我有一个 json 文件，看起来类似于下面的文件，尽管这是原始文件的缩减版本，它要大得多。我正在尝试从中获取一些坐标，并使用它们来勾勒出谷歌地图上的特定区域，我为自己设置了一个小提琴来测试：

https://jsfiddle.net/pork1977/up8rnf6d/

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "LEVEL1_COD": 1,
                "LEVEL1_NAM": "EUROPE"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                24.128105619999872,
                                34.858005329767494
                            ],
                            [
                                24.128505619999856,
                                34.808905329767484
                            ],
                            [
                                24.044605619999857,
                                34.850005329767484
                            ],
                            [
                                24.074605619999858,
                                34.868605329767476
                            ],
                            [
                                20.819105619999874,
                                80.719105329767487
                            ]
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "LEVEL1_COD": 2,
                "LEVEL1_NAM": "AFRICA"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                32.954405619999847,
                                -26.058594670232509
                            ],
                            [
                                32.895205619999871,
                                -26.040794670232515
                            ],
                            [
                                32.980505619999889,
                                -25.972794670232517
                            ],
                            [
                                32.982705619999848,
                                -25.98359467023252
                            ],
                            [
                                32.954405619999847,
                                -26.058594670232509
                            ]
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "LEVEL1_COD": 3,
                "LEVEL1_NAM": "AUSTRALASIA"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                169.185405619999841,
                                -52.576994670232516
                            ],
                            [
                                169.028205619999852,
                                -52.559194670232515
                            ],
                            [
                                169.000705619999877,
                                -52.507194670232515
                            ],
                            [
                                169.205205619999873,
                                -52.441394670232512
                            ]
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "LEVEL1_COD": 4,
                "LEVEL1_NAM": "ASIA-TROPICAL"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                96.914105619999845,
                                -12.198094670232521
                            ],
                            [
                                96.902405619999882,
                                -12.199994670232513
                            ],
                            [
                                96.914705619999864,
                                -12.151994670232511
                            ],
                            [
                                96.924405619999874,
                                -12.182794670232511
                            ],
                            [
                                96.914105619999845,
                                -12.198094670232521
                            ]
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "LEVEL1_COD": 5,
                "LEVEL1_NAM": "SOUTHERN AMERICA"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                -67.212794380000133,
                                -55.893594670232517
                            ],
                            [
                                -67.246994380000132,
                                -55.894994670232514
                            ],
                            [
                                -67.41389438000013,
                                -55.832194670232518
                            ],
                            [
                                -67.246994380000132,
                                -55.828094670232517
                            ]
                        ]
                    ]
                ]
            }
        }
    ]
}

我正在尝试对此进行过滤。我要做的是在为过滤器中的 LEVEL1_COD 键指定值时获取“坐标”。

我已经通过运行以下命令来做到这一点，在这个例子中，它向我展示了 EUROPE 的坐标，因为它的 LEVEL1_COD 值设置为 1。注意：这里的 json 变量使用的是我的完整版本上面的sn-p。

var json = JSON.parse($.getJSON({'url': "https://raw.githubusercontent.com/tdwg/wgsrpd/master/geojson/level1.geojson", 'async': false}).responseText);

var coords = json.features.filter(function (el) {
    return (el.properties.LEVEL1_COD == "1");
})[0].geometry.coordinates

console.log(coords);

Console.log 显示：

[ [ [ [ 24.128105619999872, 34.858005329767494 ], [ 24.12856,34.805619999857,8850561999857]]]]

我不知道如何将其从“等于”更改为“包含”类型的过滤器。

例如，如果我有一个 LEVEL1_COD 值列表，例如 1、2、5，并且我想过滤这些值以便我可以看到每组坐标，你会怎么做呢？我想为每个区域在地图上列出区域。

我确定需要调整的行是：

return (el.properties.LEVEL1_COD == "1");

但是在尝试了各种各样的事情之后，我无法让它返回超过一组。您是否需要遍历每个项目才能执行此操作？还是有更聪明的方法？速度有点重要，因为我将使用的 json 文件非常大。

谢谢保罗

【问题讨论】：

也许声明一个类似于levels = [1,2,5] 的变量，然后将过滤条件更改为levels.includes(el.properties.LEVEL1_COD)
我没想到，谢谢。我创造了一个小提琴：jsfiddle.net/pork1977/2rysg5vq/274 我想我可能走错了路，我试图根据这些价值观勾勒出地区/国家。我正在尝试使用谷歌地图，脚本最终会进入一个更大的网站，其中的值最终会根据用户输入等动态更改。无论如何我会继续玩，谢谢你们俩

标签： javascript arrays json list filtering

【解决方案1】：

您似乎正在填充您的地图框。你可以使用包的过滤器

this.map.setFilter('YOUR_LAYER', ['==', 'LEVEL1_COD', 'YOUR_VALUE']);

【讨论】：

感谢这个黑麦，在上面 Nitihish 的帮助下，我几乎成功地完成了我现在需要做的事情。我现在必须找到一种方法来根据选择的任何区域设置缩放，目前我不知道该怎么做，但我确定我会到达那里。

【解决方案2】：

如果您希望根据提供的输入（多个值，即一个数组）从数据中获取多个匹配元素，则可以使用Array.some。

下面我模拟了几个例子，希望这是你要找的

let data = {type:'FeatureCollection',features:[{type:'Feature',properties:{LEVEL1_COD:1,LEVEL1_NAM:'EUROPE',},geometry:{type:'MultiPolygon',coordinates:[[[[24.128105619999872,34.858005329767494],[24.128505619999856,34.808905329767484],[24.044605619999857,34.850005329767484],[24.074605619999858,34.868605329767476],[20.819105619999874,80.719105329767487],],],],},},{type:'Feature',properties:{LEVEL1_COD:2,LEVEL1_NAM:'AFRICA',},geometry:{type:'MultiPolygon',coordinates:[[[[32.954405619999847,-26.058594670232509],[32.895205619999871,-26.040794670232515],[32.980505619999889,-25.972794670232517],[32.982705619999848,-25.98359467023252],[32.954405619999847,-26.058594670232509],],],],},},{type:'Feature',properties:{LEVEL1_COD:3,LEVEL1_NAM:'AUSTRALASIA',},geometry:{type:'MultiPolygon',coordinates:[[[[169.185405619999841,-52.576994670232516],[169.028205619999852,-52.559194670232515],[169.000705619999877,-52.507194670232515],[169.205205619999873,-52.441394670232512],],],],},},{type:'Feature',properties:{LEVEL1_COD:4,LEVEL1_NAM:'ASIA-TROPICAL',},geometry:{type:'MultiPolygon',coordinates:[[[[96.914105619999845,-12.198094670232521],[96.902405619999882,-12.199994670232513],[96.914705619999864,-12.151994670232511],[96.924405619999874,-12.182794670232511],[96.914105619999845,-12.198094670232521],],],],},},{type:'Feature',properties:{LEVEL1_COD:5,LEVEL1_NAM:'SOUTHERN AMERICA',},geometry:{type:'MultiPolygon',coordinates:[[[[-67.212794380000133,-55.893594670232517],[-67.246994380000132,-55.894994670232514],[-67.41389438000013,-55.832194670232518],[-67.246994380000132,-55.828094670232517]]]]}}]};

const getFilteredData = (data, input) =>
  data.features.filter(feature => {
    return input.some(i => i === feature.properties.LEVEL1_COD);
  });


let input = [1];
let filterdData = getFilteredData(data, input);
console.log(filterdData);

input = [1, 2, 5];
filterdData = getFilteredData(data, input);
console.log(filterdData);

input = [1, 7];
filterdData = getFilteredData(data, input);
console.log(filterdData);

.as-console-wrapper {
  max-height: 100% !important;
}

【讨论】：

感谢 Nithish，这是最有帮助的。我今天在这方面花了相当多的时间，我现在可以根据您的示例返回数据here，但我似乎无法编写代码来正确地形成 json 以显示多个区域在地图上。我一直在尝试连接这些值，但我显然做错了一些事情，因为它适用于 1 个值，但仅此而已。我怀疑我尝试这样做的方式会严重破坏事情，并且可能是格式问题。 jsfiddle.net/pork1977/2rysg5vq/432
还有一个问题，您知道是否可以将地图自动缩放到所选区域的边界？最好为此提出一个新问题？
我已经修改了你分享的小提琴。 Here 是链接。仅出于示例目的，我添加了标记和谷歌地图本身提供的信息窗口。
Ty，现在全部完成完成版本（在加载文件时有几个小问题）jsfiddle.net/pork1977/okwma8pf