Формат сложных вложенных объектов

Question

Я опубликовал ранее на форуме 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, поэтому решение здесь должно быть применимо к будущим пользователям.

Код в настоящее время; Прокомментировано рассеяние моих попыток доступа и отображения требуемых значений. Элемент element 'features' является информационной панелью. В противном случае функции возвращают вложенный объект (см. образец).

В настоящее время 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 (показывает структура особенностей объекта в особенности элемента по щелчку).
• похожее: Having trouble with mapbox GL layers; Access/process (nested) objects, arrays or JSON
• Alt: https://gis.stackexchange.com/questions/181005/extract-geojson-properties-dynamically-with-mapbox-gl

Answer 1

Вот как вы итерируете features объекта и создать что-то удобочитаемое из него. Объяснение в комментариях:

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

      } 

     } 

    }); 
}); 

Вот рабочий пример на Plunker: http://plnkr.co/edit/iqntvRFTcWK1hgpzPBvX?p=preview

Вы можете прочитать, если вы хотите, чтобы понять концепцию свойств объекта и как получить к ним доступ:

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Property_accessors