Display JSON (from URL) specific info into HTML

Question

I need to display the total downloads of my tool, hosted on SourceForge.

They have an API to return the data in JSON format. But the returned data has a lot of information, and I just need 1 of them.

This is the URL for SourceForge API, showing the data:
https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19

I was able to do this on a local file, but I can't make it work from an external source.

My HTML file code:

<html>
<title>Total Downloads</title>
<body>
    <div id="container">
        <div id="output">NO DATA</div>
    </div>
    <script src="totdwn.js"></script>
</body>
</html>

My totdwn.js file code:

var jcontent = {
    "total": 123456789
}
var output = document.getElementById('output');
output.innerHTML = jcontent.total;

This works well, but the data has to be manually inserted into JS file. I want to fetch the data from the URL. The total info is the same on the URL, but how do I load it into the jcontent variable?

Racil Hilan · Accepted Answer · 2018-04-19T16:29:56.223

2

You need to use Ajax to make a request to that URL and retrieve the JSON data back. You can do that with vanilla JavaScript or it's a little easier using jQuery:

var url = "https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19";

$.ajax({
  method: "GET",
  cache: false,
  url: url,
  success: function(data) {
    document.getElementById('output').innerHTML = data.total;
  },
  error: function(error) {
    //What do you want to do with the error?
  },
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="output">NO DATA</div>
</div>

If you want to do it in vanilla JavaScript, here is an example:

var url = "https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19";

var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
    document.getElementById('output').innerHTML = JSON.parse(xmlHttp.responseText).total;
}
xmlHttp.open("GET", url, true);
xmlHttp.send();

<div id="container">
  <div id="output">NO DATA</div>
</div>

edited Apr 19 '18 at 16:29

answered Apr 19 '18 at 16:01

Racil Hilan

24,690
13
50
55

This worked. 100%. Thank you very much. I'm real ignorant when it comes to JS. So if you could send/post explanation for the code I would be much appreciated (this will prevent me from asking again something like this lol). – Rawstring Apr 19 '18 at 16:21
What exactly would you like me to explain about it? The jQuery Ajax is pretty simple. You give it the method (e.g. `GET` or `POST`), the URL, and it will make the request and either call the `success` or `error` function. The JavaScript `XMLHttpRequest` does the exact same thing, but just a bit more complex to use. – Racil Hilan Apr 19 '18 at 16:27
I came across some codes around with this `if (xmlHttp.readyState == 4 && xmlHttp.status == 200)` and have no idea so far of what it does actually .. – Rawstring Apr 20 '18 at 00:17
1

You really need to read the documentation, it's hard to explain it here. Basically, when you make a request, the `XMLHttpRequest` object keeps raising the `onreadystatechange` event to tell you about the progress (i.e. status) of the request. There are several statuses, but the `readyState == 4 && status == 200` means that the final result was received and it was successful. To handle errors, you need to check the other statuses. That's why I said that jQuery was a bit easier as it hides all this complexity and you only need to deal with `success` or `error`. – Racil Hilan Apr 20 '18 at 00:23
Ol, I understand it. I know what to look for in the documentation to understand a bit more of this. Thank you very much for the explanations. – Rawstring Apr 20 '18 at 02:07
just one more thing, anyway to use the `
` in the same line as other text ?
– Rawstring Apr 20 '18 at 13:37
I didn't get what you said, please explain. Note that if it is additional requirement to the question, you'll need to open a new question. – Racil Hilan Apr 20 '18 at 14:46

score 1 · Answer 2 · answered Apr 19 '18 at 16:07

As Racil Hilan said, you can do that with plain JavaScript so here is the solution.

var url = "https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19";

var xhttp = new XMLHttpRequest();
xhttp.open("GET", url, false);
xhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
        var output = document.getElementById('output');
        output.innerHTML = this.responseText;
    }
};      
xhttp.send();

score 0 · Answer 3 · answered Apr 19 '18 at 16:13

You don't need to use jQuery or any third-party libraries.

You can use pure JavaScript to make XMLHttpRequests. This helper function works in all browser.

var newXHR = null;   
function sendXHR(type, url, data, callback) {
  newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
  newXHR.open(type, url, true);
  newXHR.send(data);
  newXHR.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
      callback(this.response);
    }
  };
}

The above helper function works in all browsers.

Where:

type = Could be a HTTP verb, in this case GET.

url = URL string to request.

data = Could be null.

callback = Callback function when the response is ready. (this.status === 200 && this.readyState === 4).

Something like this:

(function() {
  var newXHR = null;

  function sendXHR(type, url, data, callback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    newXHR.open(type, url, true);
    newXHR.send(data);
    newXHR.onreadystatechange = function() { // Use onreadystatechange instead onload.
      if (this.status === 200 && this.readyState === 4) {
        callback(this.response);
      }
    };
  }

  sendXHR("GET", "https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19", null, function(response) {
    var data = JSON.parse(response);
    document.getElementById("output").innerHTML = data.total;
  });

}());

<div id="container">
  <div id="output">NO DATA</div>
</div>

Display JSON (from URL) specific info into HTML

3 Answers3