Using jQuery to build table rows from Ajax response(Json)

Using jQuery to build table rows from Ajax response(Json)

by Alex Azuero

HTML

<table id="records_table" border='1'>
    <tr>
        <th>Rank</th>
        <th>Content</th>
        <th>UID</th>
    </tr>
</table>

JavaScript

var jsonData = '[{"rank":"9","content":"Alon","UID":"5"},{"rank":"6","content":"Tala","UID":"6"}]';

$.ajax({
    url: '/echo/json/',
    type: 'POST',
    data: {
        json: jsonData
    },
    success: function (response) {
        var trHTML = '';
        $.each(response, function (i, item) {
            trHTML += '<tr><td>' + item.rank + '</td><td>' + item.content + '</td><td>' + item.UID + '</td></tr>';
        });
        $('#records_table').append(trHTML);
    }
});