Parsing JSON key and value with a JS for loop

Question

I'm trying to get the keys and values from a JSON array, and use them to construct a table. The JSON array has been obtained correctly with AJAX.

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

I want to turn the array above, into a table constructed like this.

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

I've used the following code, which hasn't worked.

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

This script returns nothing, but the web browser reports a successful JSON retrieval. I've tried creating the table by doing:

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

Neither work.

Two small errors. This `i < data.length;` should be this `i < data_keys.length;` and this `data[i]` should be this `data[data_keys[i]]` — , Oct 02 '14 at 17:19
...and be aware that you don't have any guarantee that the order will be the same as that which is defined in the object, so your rows may be inconsistently ordered. — , Oct 02 '14 at 17:22
And IMO, it's a good idea to do your `$("tbody#resource")` outside the loop and cache it in a variable rather than doing it over and over. — , Oct 02 '14 at 17:23

score 1 · Accepted Answer · edited Oct 02 '14 at 17:16

1

You don't have an array, you have an object, use the for in syntax:

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

edited Oct 02 '14 at 17:16

Alireza Ahmadi

1,541
18
22

answered Oct 02 '14 at 17:15

tymeJV

103,943
14
161
157

Renato Gama · Answer 2 · 2014-10-02T17:26:14.267

1

Another way:

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

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

I am not sure but I think that Object.keys are not standard

edited Oct 02 '14 at 17:26

answered Oct 02 '14 at 17:20

Renato Gama

16,431
12
58
92

1

Regarding `Object.keys`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys – Felix Kling Oct 02 '14 at 17:34
So with `Object.keys` you don't need an additional check (`.hasOwnProperty`) but it is less compatible than `for ... in` – Renato Gama Oct 02 '14 at 17:39

Parsing JSON key and value with a JS for loop

2 Answers2