CODEWITHSUNDEEP
javascriptjsonhtmlhtml-table
daygle
daygle

Reputation: 61

JSON to HTML Table Code

I'm attempting to extract data JSON results and then placing the data in to a html table, unfortunately I haven't had any luck so far and was hoping to get some pointers with what I have created so far.

I would also like the option to only show some of the JSON results, so excluding some of the data.

JSON Results Website = http://asc.thecoin.pw/index.php?page=api&action=public

Below is what I have so far which doesn't work :(

Html Code:-

<!DOCTYPE html>
<html>
<body>

<h1>Asiccoin (ASC)</h1>
<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://asc.thecoin.pw/index.php?page=api&action=public";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" +
        arr[i].pool_name +
        "</td><td>" +
        arr[i].hashrate +
        "</td><td>" +
        arr[i].workers +
        "</td></tr>"
        arr[i].shares_this_round +
        "</td></tr>" +
        arr[i].last_block +
        "</td></tr>" +
        arr[i].network_hashrate +
        "</td></tr>" +
        arr[i].fee +
        "</td></tr>" +
        arr[i].payout +
        "</td></tr>";
    }
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Any help would be much appreciated.

Upvotes: 2

Views: 292

Answers (3)

Ankit Kathiriya
Ankit Kathiriya

Reputation: 1231

i have direct access your response in variable because we can't get date from request. this is work properly.

var xmlhttp = new XMLHttpRequest();
var url = "http://asc.thecoin.pw/index.php?page=api&action=public";
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.withCredentials = false;
xmlhttp.send();
   
function myFunction(response) {  
  out = "<table>";    
    out += "<tr><td>" +
        response.pool_name +
        "</td><td>" +
        response.hashrate +
        "</td><td>" +
        response.workers +
        "</td></tr>"
        response.shares_this_round +
        "</td></tr>" +
        response.last_block +
        "</td></tr>" +
        response.network_hashrate +
        "</td></tr>" +
        response.fee +
        "</td></tr>" +
        response.payout +
        "</td></tr>";         
  out += "</table>";
    document.getElementById("id01").innerHTML = out;  
 }     
</script>
   
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Asiccoin (ASC)</h1>
<div id="id01"></div>

Upvotes: -1

Deepak Biswal
Deepak Biswal

Reputation: 4320

As response is a JOSN object not an array, you don't have to loop it. Use this function:

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

        out += "<tr><td>" +
        arr['pool_name'] +
        "</td><td>" +
        arr['hashrate'] +
        "</td><td>" +
        arr['workers'] +
        "</td></tr>"
        arr['shares_this_round'] +
        "</td></tr>" +
        arr['last_block'] +
        "</td></tr>" +
        arr['network_hashrate'] +
        "</td></tr>" +
        arr['fee'] +
        "</td></tr>" +
        arr['payout'] +
        "</td></tr>";
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}

NOTE: Just to make sure everytime your response is a JOSN object or not. If it's returning array also then above method is not going to work for an array response. So check if response is an array or not by using Array.isArray(response) and if it an array loop through it as you have done above else use my logic.

Upvotes: 2

Guido Kitzing
Guido Kitzing

Reputation: 892

You are trying to run through an array in myFunction(). But your JSON-data represents an object.

Try this for a quickfix of this problem: Change

var arr = JSON.parse(response);

to this

var arr = [JSON.parse(response)];

This will put your object (from JSON.parse) into an array, so arr.length will not be undefined, and you can build your table. This works, as long, as your JSON remains an object. If your response is an array, then your original code will work.

You can extend your conversion by using a simple alternative:

var arr = JSON.parse(response);

if (arr.length === undefined) {
    arr = [arr];
}

If you would like to exclude some of your data, you can just omit some of your code for handling that (just don't output it in the table). Or, if you have multiple objects in an array, returned to you, you will need a criteria to omit some of the datasets, e.g. (arbitrary)

for(i = 0; i < arr.length; i++) {
    if (arr[i].workers <= 1) {
        continue;
    }
    //...
}

Hope that helps

Upvotes: 0

Related Questions