Populate html table on jQuery success event

ajax, html, html-table, jquery

Solution

You could try this:

    var table = $("#table tbody");
    $.each(data, function(idx, elem){
        table.append("<tr><td>"+elem.username+"</td><td>"+elem.name+"</td>   <td>"+elem.lastname+"</td></tr>");
    });

More information can be found here: http://api.jquery.com/jQuery.each/

Problem

Here's my problem. I have this html table: ``` <table class="flexme" id="table" border="1"> <thead> <tr> <th width="100">Usuario</th> <th width="100">Nombre</th> <th width="100">Apellido</th> <th width="100">Cedula/Rif</th> <th width="140">Direccion</th> <th width="100">E-mail</th> <th width="100">Telefono1</th> <th width="100">Telefono2</th> <th width="100">Status</th> <th width="150">Acci&oacute;n</th> </tr> </thead> <tbody> <tr id="test"> <td></td> </tr> </tbody> </table> ``` and I have this ajax request: ``` $.ajax({ type : "POST", url : "service.php", dataType: "json", data: { action:"search", type: 'users', parameter: parameter, parameterContent: parameterContent, }, success:function(data) { $('#searchResults').show(); var len = data.length; for (var i = 0; i< len; i++) { var username = data[i].username; var name = data[i].uname; var lastname = data[i].lastname; } }) ``` What is the correct way to populate the html table with the info that comes via JSON? I have been trying with no success. I have done tests with `append()` `html()` but no success at all, can someone please point me into the right direction? What I want is to take the info that comes via JSON and populate the table dynamically with this info.

Original source