JSON to HTML Table Code

Question

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.

Open console and read error message explaining why you can't to it. Then google "CORS javascript". — dfsq
– dfsq, Commented Dec 8, 2015 at 11:09
http://asc.thecoin.pw/index.php?page=api&action=public returning a JOSN object not an array! — Deepak Biswal
– Deepak Biswal, Commented Dec 8, 2015 at 11:11
No need to iterate through loop as service is returning object not array! — Rayon
– Rayon, Commented Dec 8, 2015 at 11:18
also don't need to take array directly access your response by using . operator i have added answer please check. — Ankit Kathiriya
– Ankit Kathiriya, Commented Dec 8, 2015 at 11:41

Deepak Biswal · Accepted Answer · 2015-12-08 11:40:04Z

2

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.

edited Dec 8, 2015 at 11:40

answered Dec 8, 2015 at 11:24

Deepak Biswal

4,3302 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rayon Over a year ago

typeof response will never return array

Deepak Biswal Over a year ago

Thanks @RayonDabre! To check response is an array or object you can use: Array.isArray(response);

Guido Kitzing · Accepted Answer · 2015-12-08 11:24:17Z

0

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

edited Dec 8, 2015 at 11:24

answered Dec 8, 2015 at 11:17

Guido Kitzing

8925 silver badges15 bronze badges

10 Comments

Rayon Over a year ago

Why to keep unnecessary for loop in code..It may create confusion and will be difficult to debug in some cases..

daygle Over a year ago

I changed to 'var arr = [JSON.parse(response)];' but unfortunately it didn't correct it.

Guido Kitzing Over a year ago

@Rayon Dabre: We do not know for sure, that there is always just one object returned from the request. When there are more, there will be an array to run through.

Rayon Over a year ago

I don't think your solution will work in that case...I feel it will create array inside array..

Guido Kitzing Over a year ago

@Rayon Dabre: You are correct, that is why I extended my answer to engage that problem

|

Ankit Kathiriya · Accepted Answer · 2015-12-08 12:31:05Z

-1

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>

edited Dec 8, 2015 at 12:31

answered Dec 8, 2015 at 11:39

Ankit Kathiriya

1,23110 silver badges17 bronze badges

16 Comments

Rayon Over a year ago

jQuery is not tagged and is not needed too!

daygle Over a year ago

Oh so your using the data rather than the html link? How do I make it work with the link?

Ankit Kathiriya Over a year ago

@daygle in your code this is works fine you need to change in "myFunction" only..

daygle Over a year ago

Oh Rayon Dabre is correct - CORS is disbaled on my server, this may be preventing any data from appearing.

Guido Kitzing Over a year ago

@Ankit: Your code works, because you are setting the JSON directly, instead of pulling it from the server via AJAX. But that is currently the main issure here. CORS is disabled on the server, so it will not work, as intended by daygle.

|

Collectives™ on Stack Overflow

JSON to HTML Table Code

3 Answers 3

2 Comments

10 Comments

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

10 Comments

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related