Display properties of nested GeoJson in Mapbox

Question

I am unable to query nested properties feature, which is imported from a geojson source and displayed on a mapbox map.

I am able to get the feature with an on click listener, but as soon as the property is nested, the object is represented as a string

{
 ...
  properties: {
   address: "{"place":"Bern","street":"Fischerweg","street_nr":"11","zip":"3012"}"
   price: 4500
 }
}

Therefore I am only able to display the not-nested properties in a popup, when it is clicked.

my code:

const features = this.queryRenderedFeatures(e.point, {
        layers: ['unclustered-point']
      });

console.log(feature.properties.price) --> 4500
console.log(feature.properties.address) --> string instead of object {"place":"Bern","street":"Fischerweg","street_nr":"11","zip":"3012"}
console.log(feature.properties.address.street) --> undefined (--> NOT WORKING because of nested property)


const popup = new mapboxgl.Popup({offset: [0, -15]})
   .setLngLat(feature.geometry.coordinates)
   .setHTML('<h3>Price: ' + feature.properties.price + '</h3>
                  <p>Street: ' + feature.properties.address.street + '</p>')--> NOT WORKING because of nested property
   .setLngLat(feature.geometry.coordinates)
   .addTo(map);

I read that you can access nested properties with expressions, but how can expressions be applied in the html of the popup? Is there a way how I can access the nested properties or do I have to redesign the geojson's structure?

any help is highly appreciated! Thank you so much,

Regards Simon

Answer 1

Since the property values are converted into JSON strings, you need a reverse conversion:

Object.keys(feature.properties).forEach(function(key) {
  feature.properties[key] = JSON.parse(feature.properties[key]);
});

[ https://jsfiddle.net/s1d7hL82/ ]