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

Answer 2

另一种方式：

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

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

我不确定，但我认为Object.keys不是标准的

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

2 个答案: