I have a database, analysis.php and index.php webpages. The analysis.php gets the data from the database, sorts it in a required pattern, and then echoes the json_encode($array); into a div with the id 'data'. I am trying to get that JSON Data and parse it in the index.php page.

However I am getting an error. SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

I am trying to get this data everytime the user selects an option from a select box.

My jQuery code is:

$(document.body).on('change', '.select' , function () {
    var identification = $(this).val();
    var JSONText = $(this).closest('div[id|="module"]').find('p[id="JSON"]');
    JSONText.load('analysis.php?data=' + identification + ' #data');
    console.log("JSON Imported: '" + identification + "'");
    var obj = jQuery.parseJSON(JSONText.text());
    console.log(JSONText.text());
});

EDIT: As you can see I have the snippet console.log(JSON.text());. The output of the JSON that I get is correct. The only issue I think might be is that the quotes are all " instead of the JSON quotes being different from the outer quotes.

I have a database, analysis.php and index.php webpages. The analysis.php gets the data from the database, sorts it in a required pattern, and then echoes the json_encode($array); into a div with the id 'data'. I am trying to get that JSON Data and parse it in the index.php page.

However I am getting an error. SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

I am trying to get this data everytime the user selects an option from a select box.

My jQuery code is:

$(document.body).on('change', '.select' , function () {
    var identification = $(this).val();
    var JSONText = $(this).closest('div[id|="module"]').find('p[id="JSON"]');
    JSONText.load('analysis.php?data=' + identification + ' #data');
    console.log("JSON Imported: '" + identification + "'");
    var obj = jQuery.parseJSON(JSONText.text());
    console.log(JSONText.text());
});

EDIT: As you can see I have the snippet console.log(JSON.text());. The output of the JSON that I get is correct. The only issue I think might be is that the quotes are all " instead of the JSON quotes being different from the outer quotes.

• javascript
• jquery
• json

• 1 how does your json look ? Also do not name your variable JSON as the browsers native json parser is assigned to it. Just seeing this, wtf are you doing there ? Use jQuery.getJSON. – LJᛃ Commented Mar 27, 2015 at 0:19
• 1 Check the console for the XHR of analysis.php. The JSON response might be inplete to begin with. – Alex Commented Mar 27, 2015 at 0:21
• The JSON Response seems valid. I have checked its validity on jsonlint.. – shadoweye14 Commented Mar 27, 2015 at 0:23
• 1 @shadoweye14 when calling jQuery.load you start downloading the JSON from your server, but the other code is executed right after that, so before the download is plete hence "asynchronous". So you need to use the plete callback to be sure your data is actually loaded. – LJᛃ Commented Mar 27, 2015 at 0:34
• 1 No, the "load as html, insert into dom, retrieve using text is dangerous". I've added an example to clarify the correct usage. – LJᛃ Commented Mar 27, 2015 at 0:45

2 Answers 2

jQuery.load is asynchronous, you're trying to parse the JSON before its actually loaded. Using jQuery.getJSON loads the content, does the parsing and provides a callback you can bind to.

jQuery.load loads the content as HTML and sets the innerHTML of the selected element, you could bind the plete handler here aswell, but you may encounter issues by loading the content as HTML and then using text to retrieve it from the DOM as some parts of your JSON may be interpreted as HTML elements.

Better use this:

$(document.body).on('change', '.select' , function () {
    var identification = $(this).val();
    $.getJSON(
        'analysis.php?data=' + identification + ' #data',
        function (data) {
           console.log(data);
        }
    );
});

In addition to LJ_1102's solution, here is a way to fix your current snippet:

JSONText.load('analysis.php?data=' + identification + ' #data', function() {

    console.log("JSON Imported: '" + identification + "'");
    var obj = jQuery.parseJSON(JSONText.text());
    console.log(JSONText.text());

});