Javascript 使用JS for循环解析JSON键和值

我试图从一个JSON数组中获取键和值，并使用它们构造一个表。JSON数组已通过AJAX正确获取

{"CPU":"1.23","NetworkIN":"4.56","NetworkOUT":"0.00","Uptime":"141"}

我想把上面的数组变成这样构造的表

<tbody id="resourceTable">
<tr>
    <td>CPU</td>
    <td>1.23</td>
</tr>
<tr>
    <td>NetworkIN</td>
    <td>4.56</td>
</tr>
<tr>
    <td>NetworkOUT</td>
    <td>0.00</td>
</tr>
<tr>
     <td>Uptime</td>
     <td>141</td>
</tr>
</tbody>

中央处理器
1.23
网络
4.56
联网
0
正常运行时间
141

我使用了以下代码，没有起作用

<script>
    $(document).ready(function(){
        var resoruce_refresh = setInterval(function(){
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: "{}",
                url: "http://localhost/json.php",
                dataType: "json",
                success: function(data){
                    var data_keys = Object.keys(data);
                    for(var i = 0; i < data.length; i++){
                        var resource_append = "<tr><td>" + data_keys[i] + "</td><td>" + data[i] + "</td></tr>";
                        $("tbody#resource").append(resource_append);
                    }
                },
                error: function(result){
                    console.log("Failed to get JSON.");
                },
            });
        }, 10000);
   });
</script>

$（文档）.ready（函数（）{
var resoruce_refresh=setInterval（函数（）{
$.ajax({
类型：“POST”，
contentType:“应用程序/json；字符集=utf-8”，
数据：“{}”，
url:“http://localhost/json.php",
数据类型：“json”，
成功：功能（数据）{
var data_keys=Object.keys（数据）；
对于（变量i=0；i

此脚本不返回任何内容，但web浏览器报告JSON检索成功。 我尝试通过以下操作创建表：

document.getElementById("tbody#resourceTable").innerHTML = "<tr><td>............";
document.getElementById("resourceTable").innerHTML = "<tr><td>............";

document.getElementById（“tbody#resourceTable”）.innerHTML=“………”；
document.getElementById（“resourceTable”）.innerHTML=“………”；

---

两者都不起作用。

如果没有数组，则有对象，请使用

for in

语法：

for(var key in data){
    var resource_append = "<tr><td>" + key + "</td><td>" + data[key] + "</td></tr>";
    $("tbody#resourceTable").append(resource_append);
}

for（变量输入数据）{
var-resource_-append=“”+键+”+数据[键]+”；
$（“tbody#resourceTable”）.append（resource#u append）；
}

另一种方式：

var rows = Object.keys(data).reduce(function(rows, key) {
    return rows + '<tr><td>' + key + '</td><td>' + data[key] + '</td></tr>');
}, '');

$("tbody#resourceTable").append(rows);

var rows=Object.keys（数据）.reduce（函数（行，键）{
返回行+“”+键+“”+数据[键]+“”）；
}, '');
$（“tbody#resourceTable”）.append（行）；

---

我不确定，但我认为

Object.key

不是标准的

两个小错误。该

i应该是这个
i
和这个
data[i]
应该是这个
data[data\u keys[i]
…并且要注意，您不能保证顺序与对象中定义的顺序相同，因此您的行可能顺序不一致。在我看来，最好使用
$（“tbody\35;资源”）
在循环外部，并将其缓存在变量中，而不是反复执行。关于
对象.keys
：因此对于
对象.keys
，您不需要额外检查（
.hasOwnProperty
），但它与
的兼容性不如
。。。在