设置复杂嵌套对象的格式

我之前在 gis 论坛（下面的 Alt ）上发过帖子，虽然活动很少，所以我在这里试试运气。从根本上说，我认为这也是一个 js 对象数组问题。有许多类似的问题，但我无法获得适用于我必须处理的对象结构的解决方案。

撇开警告不谈;

问题：获取从嵌套在解析的对象数组中的（未知）数量的对象返回的信息，以便可以以人类可读的方式提取、格式化和显示它们。例如;

Layer id  <--- currently returned as val.layer.id (see snippet)
key1 : value1 <
key2 : value2 <-- returns in console.log as Object at val.properties
key3 : value3 <
Layer id
key1 : value1
key2 : value2
Layer id...

我只需要每个"features.layer.id"及其关联的"features.properties"，其键和值是未知的，并且在层（位于 features.properties 的对象）之间有所不同。这些特征位置在MapBox中是一致的，因此这里的解决方案应该适用于未来的用户。

当前代码;注释掉的是我尝试访问和显示所需值的零星。"功能"元素 ID 是信息面板。否则，功能是返回的嵌套对象（请参阅示例）。

concattedjson 当前在第一层标题的第一个字母上产生了错误（"意外令牌 N"）。

map.on('click', function (e) {
    map.featuresAt(e.point, {radius: 5, layer: lyrlist}, function (err, features) {
        if (err) throw err;
        var keys = Object.keys(features);
        var val = "";
        for (var i = 0; i < keys.length; i++) {
            val = features[keys[i]];
            //document.getElementById('features').innerHTML = '<b>'+val.layer.id+'</b>';
            //console.log(val.layer.id,val.properties);
            //console.log(val.properties); shows each layer properties on click
            //console.log(val.layer.id); shows each layer title on click
            //console.log(val);
            var lyrid = val.layer.id;
            var prop = val.properties;
            concattedjson = JSON.stringify(JSON.parse(lyrid).concat(JSON.parse(prop)));
        }   
    document.getElementById('features').innerHTML = concattedjson   
    //document.getElementById('features').innerHTML = JSON.stringify(val.layer, ['id'], 2);     
    //document.getElementById('features').innerHTML = JSON.stringify(val.properties, null, 2);          
    });
});

包含两个"层"的 JSON 示例

    [
  {
    "layer": {
      "id": "Nature Improvement Area",
      "minzoom": 7,
      "interactive": true,
      "paint": {
        "fill-opacity": 0.3,
        "fill-color": "hsl(0, 24%, 24%)"
      },
      "type": "fill",
      "source": "mapbox://mbbdev.8uf2j3ka",
      "source-layer": "lcr_nia_v1_region",
      "layout": {
        "visibility": "visible"
      }
    },
    "type": "Feature",
    "geometry": null,
    "properties": {
      "NIA_Focu00": "Netherley Brook and Ditton Brook Corridor",
      "NIA_Focu01": "INSERT LINK TO PROFILE DOC",
      "NIA_Focus_": "07"
    },
    "id": 16
  },
  {
    "layer": {
      "id": "Liverpool City Region",
      "minzoom": 6,
      "interactive": true,
      "paint": {
        "fill-opacity": 0.2,
        "fill-antialias": true,
        "fill-color": "hsl(0, 4%, 40%)"
      },
      "type": "fill",
      "source": "mapbox://mbbdev.67id5f6x",
      "source-layer": "lcr_district_boundary_region",
      "filter": [
        "==",
        "$type",
        "Polygon"
      ]
    },
    "type": "Feature",
    "geometry": null,
    "properties": {
      "AREA_HA": 8618.7,
      "NAME": "Knowsley"
    },
    "id": 1
  }
]

• 地点：http://www.activenaturalist.org.uk/lcren/imap/mb.html（显示）单击时功能元素中的功能对象的结构）。
• 类似：使用地图框 GL 图层时遇到问题;访问/处理（嵌套）对象、数组或 JSON
• 备选方案：https://gis.stackexchange.com/questions/181005/extract-geojson-properties-dynamically-with-mapbox-gl