CODEWITHSUNDEEP
javascripthtmljson
Rawstring
Rawstring

Reputation: 67

Display JSON (from URL) specific info into HTML

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?

Upvotes: 1

Views: 6026

Answers (3)

Racil Hilan
Racil Hilan

Reputation: 25341

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>

Upvotes: 2

Danny Fardy Jhonston Berm&#250;dez
Danny Fardy Jhonston Berm&#250;dez

Reputation: 5571

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>

Upvotes: 0

jelic98
jelic98

Reputation: 713

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();

Upvotes: 1

Related Questions