I'm trying to get some data on my map with a AJAX call. But I get the following error: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data. I did console.log(dataArray). The thing is that two datasets I implemented in my application before did work and appear on screen but when I tryed to implement my third dataset I got this error and the var dataArray stays empty.

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

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

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

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

var feature_popupInfo = {
    "type": "Feature",
    "properties": {}, 
    "geometry": JSON.parse(d[fieldList.length]) 
};

var feature_dataTable = {
    "type": "Feature",
    "properties": {}, 
    "geometry": JSON.parse(d[fieldList.length]) 
};

for (var i=0; i<fieldList.length; i++){
    if ([fieldList[i].show_field] == 't') {
        feature_popupInfo.properties[fieldList[i].field_alias] = d[i];
    }
    feature_dataTable.properties[fieldList[i].field_name] = d[i]; 
};
geojson_popupInfo.features.push(feature_popupInfo);
geojson_dataTable.features.push(feature_dataTable);
});
console.log(dataArray)

I'm trying to get some data on my map with a AJAX call. But I get the following error: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data. I did console.log(dataArray). The thing is that two datasets I implemented in my application before did work and appear on screen but when I tryed to implement my third dataset I got this error and the var dataArray stays empty.

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

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

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

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

var feature_popupInfo = {
    "type": "Feature",
    "properties": {}, 
    "geometry": JSON.parse(d[fieldList.length]) 
};

var feature_dataTable = {
    "type": "Feature",
    "properties": {}, 
    "geometry": JSON.parse(d[fieldList.length]) 
};

for (var i=0; i<fieldList.length; i++){
    if ([fieldList[i].show_field] == 't') {
        feature_popupInfo.properties[fieldList[i].field_alias] = d[i];
    }
    feature_dataTable.properties[fieldList[i].field_name] = d[i]; 
};
geojson_popupInfo.features.push(feature_popupInfo);
geojson_dataTable.features.push(feature_dataTable);
});
console.log(dataArray)

• javascript
• json
• leaflet

• Make sure each element of array is a valid JSON: console.log( JSON.parse(d[fieldList.length]) ) – Andrei Zhytkevich Commented Jun 20, 2016 at 13:03
• Can you show us your AJAX call. Without knowing what data and fieldList looks like, we cannot help you. – Tomasz Nguyen Commented Jun 20, 2016 at 13:05
• Updated the code @Tomasz Nguyen. But the weird thing is that the other 2 datasets work and the last one isn't. (The dataset that is not working is pretty big, but it should be no problem with POST method) – L.fcg Commented Jun 20, 2016 at 13:13
• @L.fcg the code relay on the data you are getting from the ajax response - what is this data? Provide the JSON (the error means the JSON string is invalid) – Ron Dadon Commented Jun 20, 2016 at 13:16
• "unexpected end of data at line 1 column 1" means there is no data. Have you confirmed that anything is being returned from the ajax call? (What do you get if you console.log(data) inside getData's success handler?) – Daniel Beck Commented Jun 20, 2016 at 13:17

2 Answers 2

Make sure your PHP script outputs JSON and only JSON. Right now you're doing:

echo $attr.", ";

And later:

echo json_encode($attribute_names);

So your output contains both some ma-separated text:

2, 1, 0, 0, 0, , 0, 0, [snip], 0, 1840, 0, 2,

and later, some valid GeoJSON:

{"type":"MultiPolygon","coordinates":[[[[6.74578464881977, [snip] ,53.3291017450563]]]]}

Return (echo) only the GeoJSON, and only once, do not run any other echos, and you'll be fine.

Alright. The problem is that your script output is a mix of JSON and non-JSON data. When you split the output of your script in JavaScript, the JSON is also chunked into parts. As a result, your array d does not contain valid JSON anymore.

Normally, we would return pure JSON. In your case, that's hard, because the data in the table contains JSON.

You could go two ways:

1. When you retrieve your data from the table, decode the JSON, create an array of objects from the decoded data, encode the whole array of objects back to JSON, and return it
2. Or don't use mas and semicolons to separate your data, but use some other unique characters or strings such as '|' or 'XYZ' that has no meaning in JSON and that is not a value in the database.