Dynamically update a table using javascript

Question

I have a page where I send an ajax request to a server. There is a table on the page which displays some data. The server returns a json object which is a list of objects and it doesn't contain any layout for the page.

I want to update only table rows by returned json. How can I do this without using third-party libraries and only using jquery? I just want a rough idea and example.

Answer 1

Here is the demo fiddle. (simple version)
NEW: See the updated fiddle (advanced version).

Let's say you have this JSON data retrieved:

var jsonData = [
    { field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' },
    { field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' },
    { field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' }
];

And you have this table:

<table id="data-table">
    <tr><td>There are no items...</td></tr>
</table>

Now, you need a method that can parse the values in a customisable order and presence. For example, if you can pass a field array to the parser function; you can set the order of the fields and leave out a field or two if you want to:

loadTable('data-table', ['field1', 'field2', 'field3'], jsonData);

Notice that field4 is not parsed.

The loadTable function loops through the items of the returned array and create a <tr> with each field value inside a <td>. Here is the simple function:

function loadTable(tableId, fields, data) {
    //$('#' + tableId).empty(); //not really necessary
    var rows = '';
    $.each(data, function(index, item) {
        var row = '<tr>';
        $.each(fields, function(index, field) {
            row += '<td>' + item[field+''] + '</td>';
        });
        rows += row + '<tr>';
    });
    $('#' + tableId).html(rows);
}

UPDATE:

Added support for:

• Table headers
• Default text (for empty list)
• Appending lists
• Clearing the table
• etc...

You can now simply include an empty table and the dynamicTable will take care of the rest:

<table id="data-table"></table>

Call the dynamicTable.config() method to configure the table:

var dt = dynamicTable.config('data-table', //id of the table
                             ['field2', 'field1', 'field3'], //field names
                             ['header 1', 'header 2', 'header 3'], //set to null for field names to be used as header names instead of custom headers
                             'There are no items to list...'); //default text for no items

Then call dt.load(data); to load new data (removes the previous list if there is one),
OR call dt.load(data, true); to append the new data at the end of the previous list.

Calling dt.clear(); method will clear the whole list.

Updated fiddle here.

Answer 2

You can iterate through your JSON objects.

$.each(JSON_Object, function(key, value) {
    // Write your code here
});

Then you can simply append your table with data.

$('#yourTableName tr:last').after('<tr><td>John</td><td>$500</td></tr>');

Since you specifically mentioned that you don't need 3rd party libraries, you can do something like above. However if you need dataset with all the features, you can consider some plugin like http://datatables.net/.