使用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鍵和值

回答

相關問題