CODEWITHSUNDEEP
javascriptjson
Tech Hax
Tech Hax

Reputation: 303

How would I parse json from an external url?

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.com/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!

Upvotes: 5

Views: 4680

Answers (4)

khawar jamil
khawar jamil

Reputation: 166

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.com/user/${uname}/circle.json`, yourCallBackFunction);

 }

Let me know if you need more details on this.

Upvotes: 3

DanilGholtsman
DanilGholtsman

Reputation: 2374

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.com/user/${uname}/circle.json`, processingData);
     var stats = JSON.parse(data);
     alert(data.is_betrayed);
 }

Upvotes: 0

Nitheesh
Nitheesh

Reputation: 19986

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.com/user/${uname}/circle.json`, 
    function(data) {
      var stats = JSON.parse(data);
      alert(data.is_betrayed);
    });
}

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370689

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.com/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.

Upvotes: 2

Related Questions