JSON Parse Error: unexpected end of data at line 1 column 1 of the JSON data

Question

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.

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ᛃ
– LJᛃ, Commented Mar 27, 2015 at 0:19
Check the console for the XHR of analysis.php. The JSON response might be incomplete to begin with. — Alex
– Alex, Commented Mar 27, 2015 at 0:21
The JSON Response seems valid. I have checked its validity on jsonlint.com. — shadoweye14
– shadoweye14, Commented Mar 27, 2015 at 0:23
@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 complete hence "asynchronous". So you need to use the complete callback to be sure your data is actually loaded. — LJᛃ
– LJᛃ, Commented Mar 27, 2015 at 0:34
No, the "load as html, insert into dom, retrieve using text is dangerous". I've added an example to clarify the correct usage. — LJᛃ
– LJᛃ, Commented Mar 27, 2015 at 0:45

LJᛃ · Accepted Answer · 2017-12-31 13:19:36Z

6

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 complete 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);
        }
    );
});

edited Dec 31, 2017 at 13:19

answered Mar 27, 2015 at 0:28

LJᛃ

8,2232 gold badges27 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shadoweye14 Over a year ago

I tried that code, however it produces no results. The console.log(data); does not fire at all. There is no indication that the getJSON function does anything.

LJᛃ Over a year ago

Are you actually loading plain JSON ? Or does the output of analysis.php contain non json output ? If so, you could replace getJSON with load and use console.log($.parseJSON(data)) but it would be better(cleaner) to have analysis.php output plain JSON maybe introduce another parameter like ajax=true.

shadoweye14 Over a year ago

The page does contain HTML Elements as defined in my question above. I want to grab the text from a div with a specific ID.

Alex · Accepted Answer · 2015-03-27 00:37:39Z

2

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());

});

answered Mar 27, 2015 at 0:37

Alex

7,8331 gold badge23 silver badges40 bronze badges

2 Comments

shadoweye14 Over a year ago

Thanks a lot ;) Appreciate it.

LJᛃ Over a year ago

This is quite error prone, as soon as the json contains any html characters it'll not be correctly retrieved using jquerys text method. Also it opens all gates for XSS attacks.

Collectives™ on Stack Overflow

JSON Parse Error: unexpected end of data at line 1 column 1 of the JSON data

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related