"Unexpected end of JSON input" error on loading JSON file from local file system

Question

Hi I'm trying to retrieve data from a title.JSON file into an index.html file using AJAX calls.Both these files resides in my local file system.I have created a new instance of the chrome and 've set its target property as "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"--disable-web-security --user-data-dir="c:/chromedev"(I'm aware that this is not a good practice. Just trying out a server less way).Below is my code

<h1><a id="headName" href="#">Name</a></h1>
<p onclick="spaLoad()">NameChange</p>

function spaLoad(){
            var xhr = new XMLHttpRequest();
            xhr.open('GET','title.json',true);
            xhr.send();

                xhr.onreadystatechange=function () {
                    //var obj=xhr.responseText;
                     var obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                    console.log(xhr.readyState);
                    console.log(xhr.status);
                    console.log(xhr.statusText);
                    //document.getElementById('headName').innerHTML = obj;
                    document.getElementById('headName').innerHTML = obj.name;

                }
            }

title.json

{"name":"stackoverflow","age":"100"}

I get my h1 updated as "stackoverflow" through an ajax call along with the error

Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse () at XMLHttpRequest.xhr.onreadystatechange

Here are my doubts: 1.I hope AJAX is for the communication between the client and the server. Though I have avoided using a server by modifying the browser settings, how did the ajax call work for me?Is it logical? 2.The JSON file contains the data as objects.Then why should I use JSON.parse(responseText)?(JSON.parse() is for converting the string from server into object for client I hope).If i directly give var obj=xhr.responseText;I get undefined. 3.readystate is changing to 4, but status is always 0.Why is it so?How could I resolve it.

Please give a brief explanation of how this server less ajax call works.I'm very new to ajax and is confused with this.

epascarello · Accepted Answer · 2017-09-19 12:02:42Z

2

It is because readystate change fires multiple times and you expect it to fire once. You would need to check for readystate to be equal to 4 and the status to be 200 (or zero in your case since you are on the file protocol). Or use the onload and onerror events instead.

And if you still get a parsing error than you need to debug what is being returned.

//see what is returned
console.log(xhr.responseText)
//Look to see if you have hidden characters in the file.
console.log(escape(xhr.responseText))

Parsing errors occur either the file you are loading returns something else like an error page OR it has special hidden characters that cause the parser to choke.

edited Sep 19, 2017 at 12:02

answered Sep 19, 2017 at 11:41

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

3 Comments

NIV Over a year ago

I tried to fire it once by using if(xhr.readyState == 4)...the status is still 0 and I get the same error:Unexpected end of JSON input at JSON.parse ()

epascarello Over a year ago

Well status is going to be zero because you are on the file protocal and not a server. Your really should run a local server, it is not hard to do. Second issue requires you to debug it. console.log(escape(xhr.responseText)) and see why it fails.

NIV Over a year ago

But still i'm confused how an ajax works without a server

Collectives™ on Stack Overflow

"Unexpected end of JSON input" error on loading JSON file from local file system

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related