2

I have a Leaflet map exported by qgis2web plugin.
The geodata is stored as (Geo-)JSON-objects inside a variable saved as .js-file. I have an attribute field ("bildpfad") with comma-separated pathes to images I want to show in popups.
For showing the images, I need access to every single path. That works by converting the path-field to an array and going through every single element with array.forEach().
Actually I am using the JSON.parse() function. I have other workspaces where this way works great, but not in that specific one.

I got following error message in the browser console:

SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

I've already validated the JSON-object without any errors. For testing purposes I reduced the hole dataset to one feature, but with the same error-message. Here the JSON-data I'm using:

var json_spielgeraete_freizeit_2 = {
    "type": "FeatureCollection",
    "name": "spielgeraete_freizeit_2",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [{
        "type": "FeatureCollection",
        "name": "spielgeraete_freizeit_2",
        "crs": {
            "type": "name",
            "properties": {
                "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
            }
        },
    "features": [{
        "type": "Feature",
        "properties": {
            "bildpfad": "\"U:\\ER-GIS-Verbunddokumente-Baumgrün\\spielgeraete\\1010443.JPG\"",
            "kategorie": "Wippgerät"        
        },
    "geometry": {
        "type": "MultiPoint",
        "coordinates": [
            [10.9846280196624, 49.572284008148969]
        ]
    }
}]
}]
}

And here the corresponding JavaScript part:

var string = feature.properties['bildpfad'] !== nullAutolinker.link(String(feature.properties['bildpfad'])) : '';
var path_array = JSON.parse("["+string+"]");
var popupContent = 
        '<div class="datagrid">\
            <table>\
            <thead>\
            <th>test</th>\
            </thead>\
                <tbody>\
                <tr>\
                <td>test</td>\
                </tr>\''                
                path_array.forEach(path_array => popupContent += '<tr><td colspan="2" align="center"><img src="'+path_array+'" width="250px" </td></tr>')
                popupContent += '</tbody></table></div>';


        layer.bindPopup(popupContent, {maxHeight: 400});
    }

I don't think the umlauts ä,ö,ü causing the problem, removing them doesn't make any difference. The same by adding/removing / or \ in front of unsupported characters like /. I'm new in JavaScript, so maybe I'm misunderstanding some syntax rules in JSON-files (e.g. keywords or quotations marks) or somewhere else.

1

It has turned out that I don't even need to use the JSON.parse() function.
feature.properties['bildpfad'] hands a string and I just have to split it into single parts. All in all I don't have to handle with JSON structures, except of the strored geodata.
string.split(',') splits the hole comma sperated string and stores it into an array. I simply have to access these array by array.forEach and the hole thing works. As simple as it sounds.
In this context it would be important to mention when working with paths to images that absolute paths to drive-paths e.g. C:\images\1.jpg can't opened by html. You always have to put file:\\ in front of the path.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.