Nesting of clicked feature properties treats objects as strings

[marksmall]

mapbox-gl-js version: v1.10.0

browser: Google Chrome Version 81.0.4044.138 (Official Build) (64-bit) and Firefox 76.0 (64-bit) on debian 10 linux

Steps to Trigger Behavior

No real steps, below is a link to a codepen that highlights our problem. It appears that when we get the feature, having clicked on it. The object we receive, only parses the properties object down to one level. If we have nested objects, then they are treated as strings. e.g.

{
    properties: {
        name: 'John Smith'
    }
}

If I console.log the name as in console.log(event.features[0].properties.name); I see the name. However if the properties are:

{
    properties: {
        name: {
            first: 'John',
            surname: 'Smith'
        }
    }
}

If I console.log the first as in console.log(event.features[0].properties.name.first); I get undefined.

Link to Demonstration

https://codepen.io/marksmall/pen/pojKQWO

1. You need to open Dev Tools
2. Click single Mount Pleasant feature

Nothing happens on the map as there is an error trying to access an undefined object property.

Expected Behavior

I expected the whole feature to be parsed into json.

Actual Behavior

It appears only the first level is being parsed into json, any sub-levels are just treated as a string.

[karimnaaji]

@marksmall , thanks for creating a codepen that's very useful and saves time in bug reports. This needs further investigation from our end but it isn't a recently introduced regression.

[andrewharvey]

This is a duplicate of #2434 so I'll close here to keep the discussion together on the existing ticket.