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

我试图从JSON数组中获取键和值，并使用它们构造一个表。 JSON数组已通过AJAX正确获得。使用JS for循环解析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>............";

两者都不工作。

来源

2014-10-02 Alex Redwood

两个小错误。这个'我 2014-10-02 17:19:24

...并且知道你不用没有任何保证，订单将与对象中定义的订单相同，因此您的行可能不一致排列。 – 2014-10-02 17:22:10

而国际海事组织，最好在循环之外做'$（“tbody＃resource”）'并将其缓存在一个变量中，而不是一遍又一遍地执行。 – 2014-10-02 17:23:34

你没有一个数组，你有一个对象，使用for in语法：

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

来源

2014-10-02 17:15:23 tymeJV

另一种方式：

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不标准

来源

2014-10-02 17:20:37 renatoargh

关于'Object.keys'：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys – 2014-10-02 17:34:47

所以对于'Object.keys'你不需要额外的检查（'。hasOwnProperty'），但它不如'for ... in'兼容 – renatoargh 2014-10-02 17:39:15

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

回答

相关问题