CODEWITHSUNDEEP
javascript
STACK2
STACK2

Reputation: 163

unable to get response from rest api using XMLHttpRequest

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>

Upvotes: 1

Views: 1472

Answers (3)

Luca Kiebel
Luca Kiebel

Reputation: 10096

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

Upvotes: 1

Elon Musk
Elon Musk

Reputation: 364

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

Upvotes: 0

Nate Reynolds
Nate Reynolds

Reputation: 137

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

Upvotes: 0

Related Questions