Extract geojson 'properties' dynamically with mapbox gl

Question

I have an interactive map based on MapBox WebGL. I have an 'on click' function which is returning all information on data layers at that location (lovely). For each object I am trying to pull out just 'layer.id' (layer title) and 'layer.properties'(held as an object) and display that only.

I can't change the geojson so i need to be able to access the properties without knowing what they keys are.

I figured it would just be a case of looping through as an object array but i can't get it right.

Currently this partially works in the console;

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

        var keys = Object.keys(features);
        var val = "";

        for (var i = 0; i < keys.length; i++) {
            val = features[keys[i]];

    //console.log(val.layer.id,val.properties); shows layer title and property object in console.

        }           
        //document.getElementById('features').innerHTML = JSON.stringify(features, null, 2); Shows all info in panel.
    });
});

link to demo site: http://www.activenaturalist.org.uk/lcren/imap/mb.html

Answer 1

This is now a duplicate and has been (better asked) answered in full here: https://stackoverflow.com/questions/35459896/format-complex-nested-objects/35472272

Answer 2

The question title in the linked post https://stackoverflow.com/questions/35459896/format-complex-nested-objects/35472272 DOESN'T mention anything of Mapbox layer or Mapbox features.

I will just post the answer from the linked post below.

---

Here's how you iterate the features object, and create something human-readable out of it. Explanation in the comments:

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

            }
        }
    });
});