I am relatively new to js. I want to be able to parse json from an external url using pure javascript. At the moment I am using

var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
  var status = xhr.status;
  if (status === 200) {
    callback(null, xhr.response);
  } else {
    callback(status, xhr.response);
  }
};
xhr.send();
 };

 function statsget() {
 var uname = document.getElementById("nameget").value;
 var data = getJSON(`/${uname}/circle.json`);
 var stats = JSON.parse(data);
 alert(data.is_betrayed);
 }

this however is not working. Could anyone help me with this? Thanks!

I am relatively new to js. I want to be able to parse json from an external url using pure javascript. At the moment I am using

var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
  var status = xhr.status;
  if (status === 200) {
    callback(null, xhr.response);
  } else {
    callback(status, xhr.response);
  }
};
xhr.send();
 };

 function statsget() {
 var uname = document.getElementById("nameget").value;
 var data = getJSON(`https://www.reddit./user/${uname}/circle.json`);
 var stats = JSON.parse(data);
 alert(data.is_betrayed);
 }

this however is not working. Could anyone help me with this? Thanks!

• javascript
• json

• you suppose to define your callback function and pass it as a second parameter to getJSON function – DanilGholtsman Commented Apr 3, 2018 at 5:49

4 Answers 4

First of all you forgot to pass callback function to getJSON as second parameter, which is supposed to be called when your xhr returns with the data. Second, you do not need to parse data to json when you are asking for JSON file from server and setting responseType to JSON, this would be automatically done for you.

var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
  var status = xhr.status;
  if (status === 200) {
    callback(null, xhr.response);
  } else {
    callback(status, xhr.response);
  }
};
xhr.send();
 };


function yourCallBackFunction(err, data){
    if(err){
        //Do something with the error 
    }else{
        //data  is the json response that you recieved from the server
    }

}

 function statsget() {
 var uname = document.getElementById("nameget").value;
 var data = getJSON(`https://www.reddit./user/${uname}/circle.json`, yourCallBackFunction);

 }

Let me know if you need more details on this.

If you want to use pure Javascript, there's already a built-in way to do that without writing your own function:

 function statsget() {
   var uname = 'CertainPerformance';
   fetch(`https://www.reddit./user/${uname}/circle.json`)
     .then(res => res.json())
     .then(resJSON => {
       // interact with resJSON here
       console.log(resJSON);
     });
 }
 statsget();

Promises are a whole lot nicer to work with than callbacks.

There should be a callback function defined in your statsget method. Something like this.

function statsget() {
 var uname = document.getElementById("nameget").value;
 getJSON(`https://www.reddit./user/${uname}/circle.json`, 
    function(data) {
      var stats = JSON.parse(data);
      alert(data.is_betrayed);
    });
}

It's not working in the way you expecting it to because of you not using callback function (even though you have it in your getJSON function as parameter you passing)

The thing is - this function suppose to be called after you get the response. Add something like this to check

var processingData = function(status, data){
    console.log("my data is here:\n", data);
    if(status == null) { 
       return data;
    }
}

 function statsget() {
     var uname = document.getElementById("nameget").value;
     var data = getJSON(`https://www.reddit./user/${uname}/circle.json`, processingData);
     var stats = JSON.parse(data);
     alert(data.is_betrayed);
 }