How to show values in json data

Question

Wondered if somebody could help me with some JavaScript.

I have a json file which looks similar to the one below, although this is a cut down version of the original one which is considerably larger. I'm attempting to grab some coordinates from it and use them to outline specific areas on a google map to which I set myself up a fiddle to test with:

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
                            ]
                        ]
                    ]
                ]
            }
        }
    ]
}

I'm attempting to filter some values on this. What I'm trying to do is get the "coordinates" when I specify a value for the LEVEL1_COD key in the filter.

I've managed to do this by running the below, and in this example it shows me the coordinates for EUROPE as this has it's LEVEL1_COD value set to 1. Note: the json variable here is using the full blown version of my snippet above.

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 shows me:

[ [ [ [ 24.128105619999872, 34.858005329767494 ], [ 24.128505619999856, 34.808905329767484 ], [ 24.044605619999857, 34.850005329767484 ], [ 24.074605619999858, 34.868605329767476 ], [ 20.819105619999874, 80.719105329767487 ] ] ] ]

What I can't figure out, is how to change this from an 'equals' to a 'contains' type of filter.

For example, if I had a list of LEVEL1_COD values of say 1,2,5 and I wanted to filter on those values so I could see each set of coordinates, how would you go about doing that? I'd like to get the areas outlined on the map for each of these areas.

I'm sure the line which needs tweaking is:

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

But after trying all sorts of things I can't get it to return more than one set. Do you need to loop through each item to do this? or is there a smarter way? Speed is somewhat important since the json files I'll be using are quite large.

Thanks Paul

Answer 1

If you are looking to get more than one matching elements from the data based on the provided input(multiple values ie, an array) Array.some can be used.

Below I've simulated few examples, hope this is what you are looking for

 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; }

Answer 2

It seems like you are populating your mapbox. You could use the package's filter

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