Search code examples
javascriptleafletgeodjango

onEachfeatures not displaying content but [object Object]


i have a the following geojson and want to display the persons details on eachFeature

Bellow is properties section of my Geojson Output

"properties": {"lr": "26697/751", "Registrations": {"Tenure_type": "leasehold", "persons": [{"PersonID": 7475, "name1st": "benard", "name2st": "gramps", "telephone": "02857215"}, {"PersonID": 7512, "name1st": "Jackie", "name2st": "morgan", "telephone": "0248571264"}]}}}

Here is my code

<body>
<h1>Ownership</h1>
 <script type="text/javascript"> 
     function our_Layers (map, options){
        var datasets = new L.GeoJSON.AJAX("{% url 'owner' %}",{                
            onEachFeature: function(feature, layer){                    

                layer.bindTooltip(feature.properties.Registrations.persons.toString(), 
                {permanent:true, direction: 'right'});

            }
        });
        datasets.addTo(map); 

     }
</script>
{% leaflet_map "Owners" callback="window.our_Layers" %}
</body>

Solution

  • I think you need to use the JSON.stringify() function to parse your object:

    layer.bindTooltip(JSON.stringify(feature.properties.Registrations.persons), 
        {permanent:true, direction: 'right'});
    

    To see the difference between the JSON.stringify() and the .toString methods I created the following code-snippet:

    var persons = [
        { "PersonID": 7475, "name1st": "benard", "name2st": "gramps", "telephone": "02857215" },
        { "PersonID": 7512, "name1st": "Jackie", "name2st": "morgan", "telephone": "0248571264" }
    ];
    
    console.log(JSON.stringify(persons));
    console.log(persons.toString());

    For more infos view: https://www.w3schools.com/js/js_json_stringify.asp