unable to get response from rest api using XMLHttpRequest

Question

i want to call get rest api using XMLHttpRequest, but I'm getting error -

"Uncaught SyntaxError: Unexpected end of JSON input".

rest api json response data

{
    "timestamp": "2018-06-08T16:52:50.509Z",
    "dataFrame": "AQAAKCoAAQgFKgABBg==",
    "fcnt": 825,
    "freq": 865572000,
    "port": 2,
    "rssi": -115,
    "snr": -16,
    "sf_used": 12,
    "id": 1528476770509,
    "dr_used": "SF12BW125",
    "decrypted": true
}

code

 <script>
        function UserAction() {
    var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "url", true);
        xhttp.setRequestHeader("Content-type", "application/json");
        xhttp.setRequestHeader("Authorization", "Basic a2Vyb==");
        xhttp.send();
    var response = JSON.parse(xhttp.responseText);
}
    </script>

Edit:

code

 <script>
     function userAction() {
        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                let response = JSON.parse(xhttp.responseText);
                var dataFrame = response.dataFrame;
                /** code that handles the response **/
            }
        };
        xhttp.open("GET", "url", true);
        xhttp.setRequestHeader("Content-type", "application/json");
        xhttp.setRequestHeader("Authorization", "Basic a2VybmVsc==");
        xhttp.send();
    </script>

HTML

 <button type="submit" onclick="userAction()">Search</button>
   <h1 id="data"></h1>

Possible duplicate of [How to make an AJAX call without jQuery?](https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) — scrappedcola, Jun 08 '18 at 18:24

Luca Kiebel · Accepted Answer · 2018-06-08T19:05:58.620

1

You should listen to the XMLHTTPRequest.onreadystatechange event for your request, so that the result is only parsed once the request is done:

functio userAction() {
  let xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      let response = JSON.parse(xhttp.responseText);
      document.getElementById("data").innerHTML = response.dataFrame;
    }
  };
  xhttp.open("GET", "filename", true);
  xhttp.setRequestHeader("Content-type", "application/json");
  xhttp.setRequestHeader("Authorization", "Basic a2Vyb==");
  xhttp.send();
}

edited Jun 08 '18 at 19:05

answered Jun 08 '18 at 18:13

Luca Kiebel

9,790
7
29
44

getting error- Uncaught DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED. – STACK2 Jun 08 '18 at 18:22
Right, I just messed up the order a bit, editiing. Please tell me if it works now :) – Luca Kiebel Jun 08 '18 at 18:22
NIce, please also mark the question as answered :-) – Luca Kiebel Jun 08 '18 at 18:55
hai @Luca can u tell me how to bind my dataFrame variable to my html H1 tag? – STACK2 Jun 08 '18 at 19:03

score 0 · Answer 2 · answered Jun 08 '18 at 18:16

0

You need to set the xhttp.onreadystate property to a callback function to handle the various states and then process the response when it's been received.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange

answered Jun 08 '18 at 18:16

Nate Reynolds

137
2
7

score 0 · Answer 3 · answered Jun 08 '18 at 18:21

You should check the status of the request before outputting it.

function UserAction() {
   var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "url", true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.setRequestHeader("Authorization", "Basic a2Vyb==");
    
    xhttp.onload = function(){
        if(xhttp.status ==200){
            var response = JSON.parse(xhttp.responseText);
        }
    }
    
    xhttp.send();
}

unable to get response from rest api using XMLHttpRequest

3 Answers3