May 23, 2019
How to read JSON data and display in HTML
<!DOCTYPE html>
<html>
<body>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
// document.write(this.responseText+”<hr>”);
var myObj = JSON.parse(this.responseText);
for(var i = 0 ; i < myObj.score.length ; i++)
{
document.write(myObj.score[i].user_name + ” ” + myObj.score[i].total_score + “<br />”);
}
}
};
xmlhttp.open(“GET”, “all-time-json.php”, true);
xmlhttp.send();
</script>
</body>
</html>
all-time-json.php
{“score”:[{“total_score”:”10″,”id”:”163″,”user_name”:”x”},{“total_score”:”20″,”id”:”33″,”user_name”:”y”},{“total_score”:”30″,”id”:”39″,”user_name”:”z”}]}