Javascript returning null data from an api

Question

I have the following api to fetch data from http://starlord.hackerearth.com/gamesarena I am trying to access the json there using the following piece of code:

<!DOCTYPE html>
<html>
<body>

<h2>Use the XMLHttpRequest to get the content of a file.</h2>
<p>The content is written in JSON format, and can easily be converted into a JavaScript object.</p>

<p id="demo"></p>

<script>


  var requestURL = 'http://starlord.hackerearth.com/gamesarena';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  var superHeroes = request.response;
  console.log(request.response);
</script>


</body>
</html>

I expect to see JSON data,but get null.Can you explain what is missing

aprogrammer · Accepted Answer · 2018-01-21 12:37:25Z

2

Well, that's because of you are trying to get content before the response came. All XMLHttpRequests are async by default ( Many browsers will not let you make sync requests btw ). You can get the response content async way like that :

  var requestURL = 'http://starlord.hackerearth.com/gamesarena';
  var request = new XMLHttpRequest();
  request.onreadystatechange = function() {
    if(request.readyState === XMLHttpRequest.DONE) {
        // response
        console.log(request.response);
    }
  };
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();

answered Jan 21, 2018 at 12:37

aprogrammer

1,7781 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

leo Over a year ago

can you please explain what happens I mean the change.

aprogrammer Over a year ago

As I said in top, you were creating async requests to API, all async methods have to deal result with a callback. In this case our callback is the function that we assigned to onreadystatechange . XMLHttpRequest.DONE is just for to understand whether request completed successfully or not.

aprogrammer Over a year ago

And other thing is you were trying to get response immediately after sending request to API. You can't know your response is came in that line that's because of your request is not synchronous.

YouneL · Accepted Answer · 2018-01-21 13:17:24Z

0

You have to use load event to handle server response:

request.addEventListener("load", function(){
    console.log(this.responseText);
});

Note that load event only fired when the server send response to the client.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Use the XMLHttpRequest to get the content of a file.</h2>
<p>The content is written in JSON format, and can easily be converted into a JavaScript object.</p>

<p id="demo"></p>

<script>


  var requestURL = 'http://starlord.hackerearth.com/gamesarena';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  
  request.addEventListener("load", function(){
      console.log(this.responseText);
  });

  request.send();
</script>


</body>
</html>

edited Jan 21, 2018 at 13:17

answered Jan 21, 2018 at 12:42

YouneL

8,3692 gold badges30 silver badges52 bronze badges

Collectives™ on Stack Overflow

Javascript returning null data from an api

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related