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

Question

我正在尝试从 JSON 数组中获取键和值，并使用它们构建一个表。已使用 AJAX正确获取 JSON 数组。

{"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>

我使用了以下代码，但它没有工作。

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

此脚本不返回任何内容，但 Web 浏览器报告 JSON 检索成功。 我尝试通过以下方式创建表格:

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

都不起作用。

Answer 1

您没有数组，您有一个对象，请使用 for in 语法:

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