Populate html table on jQuery success event

Question

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.

Answer 1

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/

Answer 2

JS

$(document).ready(function() {
  $.ajax({
    type: 'GET',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    },
    url: 'https://localhost:44387/api/employee/employeelist',
    dataType: "json",
    success: function(data) {
      var employeeTable = $('#tblEmployee tbody');
      employeeTable.empty();
      $('#tblEmployee').show();
      var len = data.length;
      for (var i = 0; i < len; i++) {
        var EmpId = data[i].EmpId;
        var FirstName = data[i].FirstName;
        var LastName = data[i].LastName;
        var Contact = data[i].Contact;
        var Address = data[i].Address;
        var Gender = data[i].Gender;
        var Salary = data[i].Salary;
        var Gender = data[i].Gender;
        var ActiveHours = data[i].ActiveHours;
        var Remark = data[i].Remark;
        var IsAvailable = data[i].IsAvailable;
        var Hiredate = data[i].Hiredate;
        var IsActive = data[i].IsActive;
        employeeTable.append('<tr><td>' + EmpId + '</td><td>' +
          FirstName + '</td><td>' + LastName + '</td><td>' + Contact +
          '</td><td>' + Address + '</td><td>' + Gender +
          '</td><td>' + Salary + '</td><td>' + ActiveHours +
          '</td><td>' + Remark + '</td><td>' + IsAvailable +
          '</td><td>' + Hiredate + '</td><td>' + IsActive +
          '</td><td><button type="button" class="btn btn-sm btn-primary editingTRbutton fas fa-pencil-alt noUnderlineCustom text-white" data-toggle="modal" data-target="#editModal">' + 'Edit' + '</button>' + '</td></tr>');
      }

    },
    error: function(err) {
      alert(err);
    }
  })
});

HTML

<form id="Employeeform">
  <div class="container">
    <table id="tblEmployee" class="paginated table table-bordered">
      <thead class="bg-primary text-white">
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Contact</th>
          <th>Address</th>
          <th>Gender</th>
          <th>Salary</th>
          <th>ActiveHours</th>
          <th>Remark</th>
          <th>IsAvailable</th>
          <th>Hiredate</th>
          <th>IsActive</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="tabldata"></tbody>
    </table>
  </div>
</form>

Answer 3

Try this:

for (var i = 0; i < len; i++) {
   var username = data[i].username;
   var name  = data[i].name;
   var lastname = data[i].lastname;
   $('#table tbody').append('<tr><td>'+username+'</td><td>'+name+'</td><td>'+lastname+'</td></tr>')
}

Answer 4

Thanks, at the end i did it like this:

  $.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].name;
                                    var lastname  = data[i].lastname;
                                    var idnumber  = data[i].idnumber;
                                    var address  = data[i].address;
                                    var email  = data[i].email;
                                    var phone1 = data[i].phone1;
                                    var phone2 = data[i].phone2;
                                    var active = data[i].active;

                                    $("#generated").append("<tr><td>"+ username +"</td><td>"+ name +"</td><td>"+ lastname +"</td><td>"+ idnumber +"</td><td>"+ address +"</td><td>"+ email +"</td><td>"+ phone1 +"</td><td>"+ phone2 +"</td><td>"+ active +"</td></tr>");

                                }

                            }