Javascript 设置复杂嵌套对象的格式

我以前在地理信息系统论坛（下面的Alt）上发过帖子，不过活动很少，所以我在这里试试运气。从根本上说，我认为这也是一个js对象数组问题。有很多类似的问题，但我无法找到一个适合我必须处理的对象结构的解决方案

撇开警告不谈

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

• 地点：（显示） “要素”元素中要素对象的结构（单击时）
• 类似的： ;
• Alt:

---

以下是如何迭代

功能

对象，并从中创建人类可读的内容。评论中的解释：

map.on('click', function (e) {
    map.featuresAt(e.point, {
        radius: 5,
    }, function (err, features) {
        if (err) throw err;

        // Grab the 'ul' element with ID 'features' from the DOM            
        var featureList = document.getElementById('features');

        // Empty the list on every click
        featureList.innerHTML = '';

        // Iterate the features array
        for (var i = 0; i < features.length; i++) {

            // Create a listitem for each feature
            var featureItem = document.createElement('li');

            // Set the feature's listitem's content to the layer's ID
            featureItem.textContent = features[i].layer.id;

            // Append the featureitem to the featurelist
            featureList.appendChild(featureItem);

            // Create a new list for the item's properties
            var propertyList = document.createElement('ul');

            // Append the list to the feature's listitem
            featureItem.appendChild(propertyList);

            // Create convenience var for the properties object
            var properties = features[i].properties;

            // Iterate the properties object
            for (var property in properties) {

                // Create new listitem for every property
                var propertyItem = document.createElement('li');

                // Set property's listitem's textcontent to key/value
                propertyItem.textContent = property + ': ' + properties[property];

                // Append property's listitem to the feature's propertylist.
                propertyList.appendChild(propertyItem);

            }

        }

    });
});

map.on（'click'，函数（e）{
地图特征卫星（e.point{
半径：5，
}，功能（错误，功能）{
如果（错误）抛出错误；
//从DOM中获取ID为“features”的“ul”元素
var featureList=document.getElementById（'features'）；
//每次单击时清空列表
featureList.innerHTML=''；
//迭代特征数组
对于（变量i=0；i

下面是一个关于Plunker的工作示例：

如果您想掌握对象属性的概念以及如何访问它们，可能需要阅读以下内容：

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

    [
  {
    "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
  }
]

map.on('click', function (e) {
    map.featuresAt(e.point, {
        radius: 5,
    }, function (err, features) {
        if (err) throw err;

        // Grab the 'ul' element with ID 'features' from the DOM            
        var featureList = document.getElementById('features');

        // Empty the list on every click
        featureList.innerHTML = '';

        // Iterate the features array
        for (var i = 0; i < features.length; i++) {

            // Create a listitem for each feature
            var featureItem = document.createElement('li');

            // Set the feature's listitem's content to the layer's ID
            featureItem.textContent = features[i].layer.id;

            // Append the featureitem to the featurelist
            featureList.appendChild(featureItem);

            // Create a new list for the item's properties
            var propertyList = document.createElement('ul');

            // Append the list to the feature's listitem
            featureItem.appendChild(propertyList);

            // Create convenience var for the properties object
            var properties = features[i].properties;

            // Iterate the properties object
            for (var property in properties) {

                // Create new listitem for every property
                var propertyItem = document.createElement('li');

                // Set property's listitem's textcontent to key/value
                propertyItem.textContent = property + ': ' + properties[property];

                // Append property's listitem to the feature's propertylist.
                propertyList.appendChild(propertyItem);

            }

        }

    });
});