2

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
daygle
  • 61
  • 7
  • 1
    Open console and read error message explaining why you can't to it. Then google "CORS javascript". – dfsq Dec 08 '15 at 11:09
  • `http://asc.thecoin.pw/index.php?page=api&action=public ` returning a JOSN object not an array! – Deepak Biswal Dec 08 '15 at 11:11
  • Json is returning only 1 object , will return more then one – Afsar Dec 08 '15 at 11:17
  • No need to iterate through loop as _service_ is returning `object` not `array`! – Rayon Dec 08 '15 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 Dec 08 '15 at 11:41
  • Once you enable cors on your server, your code will work. There's nothing wrong with it other than that your markup is wrong. Make sure to fix all the HTML open tag and closing tag issues, and add `colspan='3'` where appropriate. – Pegues Dec 08 '15 at 12:12
  • Additionally, I suggest you add all your code not in a function into a function. Then call that function inside `window.onload = function(){ yourStartFunction(); }` This would be much cleaner. – Pegues Dec 08 '15 at 12:13

3 Answers3

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.

Deepak Biswal
  • 4,280
  • 2
  • 20
  • 37
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

Guido Kitzing
  • 892
  • 5
  • 14
  • Why to keep `unnecessary` for loop in code..It may create confusion and will be difficult to debug in some cases.. – Rayon Dec 08 '15 at 11:20
  • I changed to 'var arr = [JSON.parse(response)];' but unfortunately it didn't correct it. – daygle Dec 08 '15 at 11:24
  • @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. – Guido Kitzing Dec 08 '15 at 11:25
  • I don't think your solution will work in that case...I feel it will create array inside array.. – Rayon Dec 08 '15 at 11:27
  • @Rayon Dabre: You are correct, that is why I extended my answer to engage that problem – Guido Kitzing Dec 08 '15 at 11:28
  • @daygle: Probably 'response' is not what you expect. Can you check, if it respresents your JSON-string, by adding ``console.log(response)`` to your function. – Guido Kitzing Dec 08 '15 at 11:29
  • @deepakb thanks, still can't get it to display any data - you can check it here http://hashrate.thecoin.pw. – daygle Dec 08 '15 at 11:34
  • @daygle: The first problem still remains. You are getting an error message from the Server, when you try to access it through Ajax. You might want to have a look at this: http://www.html5rocks.com/en/tutorials/cors/ – Guido Kitzing Dec 08 '15 at 11:42
  • @Guido Kitzing - so your saying no matter what I do I won't be able to work with my html example? – daygle Dec 08 '15 at 11:46
  • No, I am not saying that. But you need to solve the problem concerning your Ajax-request across different domains. There seems to be some solution here: http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource Basically your code with the adjustments I suggested will work, when you are getting your JSON response. – Guido Kitzing Dec 08 '15 at 11:55
-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>
Ankit Kathiriya
  • 1,221
  • 10
  • 17