How to dynamically fill and print a Geojson layer on a leaflet map?
<p>I have a select list where I can select which table and attributes I want to get printed on the leaflet map. Now when I select the first table it works and get printed to the leaflet map. But when I try to select the second table in the select list I get this syntax error:</p>

<pre><code>JSON.parse: unexpected character at line 1 column 1 of the JSON data
"geometry": JSON.parse(d[fields.length]) //parse geometry  
</code></pre>

<p>This is my code:</p>

<pre><code>function mapData(data){

    map.eachLayer(function(layer){
        if (typeof layer._url === "undefined"){
                map.removeLayer(layer);
        }
    });

    geojson = {
        "type": "FeatureCollection",
        "features": []
    };

    var dataArray = data.split(", ;");
    dataArray.pop();

    console.log(geojson);

    dataArray.forEach(function(d){
        d = d.split(", "); 

        var feature = {
            "type": "Feature",
            "properties": {}, //properties object container
            "geometry": JSON.parse(d[fields.length]) //parse geometry
        };      

        for (var i=0; i&lt;fields.length; i++){
            feature.properties[fields[i]] = d[i];
        };

        geojson.features.push(feature);
    });
    window["mapDataLayer"] = L.geoJson(geojson).addTo(map);
};
</code></pre>

<p>And this is the response of the first succesvol table:</p>

<pre><code>3, 3, McD, , 6.6668000000000, 53.218000000000, {"type":"Point","coordinates":[6.536668
,53.213000]}, ;
</code></pre>

<p>And this is the response om the second table that doesn't get printed to the leaflet map and throws the syntax error:</p>

<pre><code>1400, 7, 19610, Centrum, 2413052, {"type":"MultiPolygon","coordinates":[[[[6.57886034312177,53.21809972266,41.2845400022343],[6.55981027443664,53.2275880222527,41.2689223056659],[6.5785471610371,53.2184343360823,41.2839346369728],[6.57886034312177,53.21809972266,41.2845400022343]]]]}, ;
</code></pre>