JSON 到 HTML 表格代码答案

【问题标题】：JSON to HTML Table CodeJSON 到 HTML 表格代码
【发布时间】：2016-03-13 06:37:12
【问题描述】：

我正在尝试提取数据 JSON 结果，然后将数据放入 html 表中，不幸的是，到目前为止我还没有任何运气，希望能从我目前创建的内容中获得一些指示。

我还想要只显示部分 JSON 结果的选项，因此排除部分数据。

JSON 结果网站 = http://asc.thecoin.pw/index.php?page=api&action=public

以下是我目前所拥有的，但它不起作用:(

HTML代码：-

<!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>

任何帮助将不胜感激。

【问题讨论】：

打开控制台并阅读错误消息，解释为什么你不能这样做。然后谷歌“CORS javascript”。
http://asc.thecoin.pw/index.php?page=api&action=public 返回一个 JOSN 对象而不是一个数组！
Json 只返回 1 个对象，将返回多个
不需要遍历循环，因为 service 返回 object 而不是 array!
也不需要通过使用数组直接访问您的响应。接线员我已添加答案，请检查。

标签： javascript json html html-table

【解决方案1】：

因为 response 是一个 JOSN 对象而不是一个数组，所以你不必循环它。使用这个功能：

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;
}

注意：只是为了确保您的 response 每次都是 JOSN 对象。如果它也返回array，则上述方法不适用于数组响应。因此，使用Array.isArray(response) 检查response 是否是一个数组，如果它是一个数组循环，就像你在上面所做的那样，请使用我的逻辑。

【讨论】：

typeof response 永远不会返回 array
谢谢@RayonDabre！要检查 response 是一个数组或对象，您可以使用：Array.isArray(response);

【解决方案2】：

您正试图遍历myFunction() 中的一个数组。但是您的 JSON 数据代表一个对象。

试试这个快速解决这个问题：更改

var arr = JSON.parse(response);

到这里

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

这会将您的对象（来自JSON.parse）放入一个数组中，因此arr.length 将不是undefined，您可以构建您的表。只要您的 JSON 仍然是一个对象，它就可以工作。如果您的响应是一个数组，那么您的原始代码将起作用。

您可以使用一个简单的替代方法来扩展您的转化：

var arr = JSON.parse(response);

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

如果您想排除某些数据，您可以省略一些处理该数据的代码（只是不要将其输出到表格中）。或者，如果您在返回给您的数组中有多个对象，您将需要一个标准来省略一些数据集，例如（任意）

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

希望有帮助

【讨论】：

为什么要在代码中保留unnecessary for 循环。这可能会造成混乱，并且在某些情况下难以调试。
我改为'var arr = [JSON.parse(response)];'但不幸的是它没有纠正它。
@Rayon Dabre：我们不确定，请求总是只返回一个对象。再多的时候，就会有一个数组跑过去。
我不认为你的解决方案在这种情况下会起作用......我觉得它会在数组中创建数组..
@Rayon Dabre：你是对的，这就是为什么我扩展我的答案来解决这个问题

【解决方案3】：

我可以直接访问您在变量中的响应，因为我们无法从请求中获取日期。这是正常工作。

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>

【讨论】：

jQuery 没有标记，也不需要！
哦，所以您使用的是数据而不是 html 链接？如何使它与链接一起使用？
@daygle 在你的代码中这很好用，你只需要在“myFunction”中改变..
哦，Rayon Dabre 是正确的 - 我的服务器上禁用了 CORS，这可能会阻止任何数据出现。
@Ankit：您的代码有效，因为您直接设置 JSON，而不是通过 AJAX 从服务器中提取它。但这是目前的主要问题。 CORS 在服务器上被禁用，因此它不会像 daygle 预期的那样工作。