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

Question

Okay so I'm trying to pull data from a json file that holds the status of a few LEDs, etc. I have a script that runs a few times a second and pulls the data and the webpage loads it. The problem is, after about 20+ times of the server reading the json file, eventually it will throw this error.

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

// For toggling the LED/switch status indicators using the json data
$(document).ready(function() {
    (function worker() {
        $.ajax({
            url: 'server_info.json',
            success: function(data) {
                var json = $.parseJSON(data);
                console.log(json); 
                if (json.led_1 == "off") {
                    // do stuff
                }        
                if (json.led_2 == "off") {
                    // do stuff
                } 
                if (json.led_3 == "off") {
                    // do stuff
                }        
            },
            complete: function() {
                // Schedule the next request when the current one's complete
                setTimeout(worker, 250);
            }
        });
    })();
});

The json file looks like this:

{ "led_1": "on", "led_2": "on", "led_3": "on" } 

It seems to me that the json data is always properly formatted. I'm not understanding where the error is coming from. Any ideas?

Answer 1

Using Firefox debugging, I was able to see that the value type coming back was undefined when I would get that error. Doing a check for a null/undefined on the value to be parsed first, then if condition is false, proceed with parse, else handle condition resolved my issue.

Answer 2

Use the "dataType" setting to identify the type of response so the .ajax() call knows its JSON and doesn't need to guess.

This may not solve the issue as it is likely your response is not returning JSON for the call that is throwing the error. If you add the error setting, you can see what the server is returning on error but if the requests completes, check the console for what is coming back from the server. As I said, its likely not JSON if you are getting that error from $.parseJSON() to begin with.

$(document).ready(function() {
    (function worker() {
        $.ajax({
            url: 'server_info.json',
            dataType: 'json',
            success: function(data) {
                console.log(data); 
                if (data.led_1 == "off") {
                    // do stuff
                }        
                if (data.led_2 == "off") {
                    // do stuff
                } 
                if (data.led_3 == "off") {
                    // do stuff
                }        
            },
            error: function( data, status, error ) { 
                console.log(data);
                console.log(status);
                console.log(error);
            },
            complete: function() {
                // Schedule the next request when the current one's complete
                setTimeout(worker, 250);
            }
        });
    })();
});