Reputation: 163
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
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
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
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