JSON.parse error: Unexpected end of JSON input

Question

I’m trying to get the answer to an xhr request:

...
xhr.send(formData);
var resposta = JSON.parse(xhr.responseText);
console.log(resposta); 
...

Console shows this error:

Uncaught SyntaxError: Unexpected end of JSON input

But I can’t see where I’m wrong. When I try:

console.log(xhr);

The console returns all right.

XMLHttpRequest {onreadystatechange: null, 
readyState: 1, 
timeout: 0, 
withCredentials: false, 
upload: XMLHttpRequestUpload…}
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
onreadystatechange: null
ontimeout: null
readyState: 4
response: "true"
responseText: "true"
responseType: ""
responseURL: "******"
responseXML: null
status: 200
statusText: "OK"
timeout: 0
upload: XMLHttpRequestUploadwithCredentials: false__proto__: XMLHttpRequest

Answer 1

I managed to solve the problem!

I added this line before sending the request, stating that the response will be text type:

xhr.responseType="text";
xhr.send(formData);

Then I added the excerpt below to get the reply of the request when it is completed:

xhr.addEventListener('readystatechange', function() {
    console.log(xhr.responseText); 
});

Answer 2

Hello Amanda your responseText is not a valid JSON, since it contains only a string "true".

responseText: "true"

I don’t think in this case you need to parse. A valid JSON example (returned by the server) would be:

{"resultado": "true"}

Update

According to the comments below, it must be happening that you try to get the result before the request has returned. So I’m going to leave an example request here. https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery

    <script type="text/javascript">
function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}
</script>

Answer 3

searching for an answer about the same error, I found that the return string contained accented characters and after removing worked, so that’s when I changed the format when saving the file to utf-8 because it was in ANSI and solved the problem (for me).

Answer 4

Putz I did different and made the same mistake. What I did was an ajax call with Jquery this way:

$.ajax({
    url: "/post/updatetags",
    type: "POST",
    data: JSON.stringify(obj),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        console.log("resposta: " + data)
        console.log("as tags foram atualizadas com sucesso!!!");
    },
    error : function(jqXHR, textStatus, errorThrown) {
        console.log("jqXHR: " + jqXHR.status);
        console.log("textStatus: " + textStatus);
        console.log("errorThrown: " + errorThrown);
    }
});

He arrived at the controller, but always gave the problem. Removing the

dataType: "json"

solved the problem

Answer 5

It is also worth checking if you are using the correct PUT POST GET as well as Pathvariable and Requestparam