Load JSON data and display in HTML table using jQuery

Simple and straight forward technique to load JSON data and display in HTML table using jQuery

by Duke Dinh

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>

CSS

#resultTable {
                border: 3px solid gray;
            }
            #resultTable td {
                border: 1px solid gray;
            }

JavaScript

var items = [{
    "senderID": "00:50:c2:63:10:1a",
        "startTime": "1349773838277760",
        "endTime": "1349773838277770",
        "startArea": "areaStart",
        "endArea": "areaEnd",
        "duration": "10"
}, {
    "senderID": "00:50:c2:63:10:1a",
        "startTime": "1349773838277760",
        "endTime": "1349773838277780",
        "startArea": "areaStart",
        "endArea": "areaEnd",
        "duration": "20"
}, {
    "senderID": "00:50:c2:63:10:1a",
        "startTime": "1349773838277760",
        "endTime": "1349773838277780",
        "startArea": "areaStart",
        "endArea": "areaEnd",
        "duration": "20"
}



];


$table = "<table id = 'resultTable'><td>nr</td><td>senderID</td><td>startTime</td><td>endTime</td><td>startArea</td><td>endArea</td><td>duration</td><tr>";

for (var i = 0; i < items.length; i++) {

    $table += "<tr>";

    var it = items[i];

    $table += "<td>" + i + "</td>";

    $table += "<td>" + items[i].senderID + "</td>";

    $table += "<td>" + items[i].startTime + "</td>";

    $table += "<td>" + items[i].endTime + "</td>";

    $table += "<td>" + items[i].startArea + "</td>";

    $table += "<td>" + items[i].endArea + "</td>";

    $table += "<td>" + items[i].duration + "</td>";

    //alert(items[i].duration);
    $table += "</tr>";

}

$table += "</table>";

$('body').append($table);
$table = "<table id = 'resultTable'><td>nr</td><td>senderID</td><td>startTime</td><td>endTime</td><td>startArea</td><td>endArea</td><td>duration</td><tr>";