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?
3 answers
solution1
2 ACCPTED 2018-04-19 16:01:58
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>
solution2
1 2018-04-19 16:07:53
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();
solution3
0 2018-04-19 16:13:35
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 caseGET.url= URL string to request.data= Could benull.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.