JSON 到 HTML 表格代码
Posted
技术标签:
【中文标题】JSON 到 HTML 表格代码【英文标题】：JSON to HTML Table Code 【发布时间】：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!
也不需要通过使用数组直接访问您的响应。接线员我已添加答案，请检查。
【参考方案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 预期的那样工作。以上是关于JSON 到 HTML 表格代码的主要内容，如果未能解决你的问题，请参考以下文章