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.

could you please show the code snippet that was preparing the TRs from the JSON response? And how you were trying to add them to the TBODY? — Vikdor, Aug 21 '12 at 05:33

score 20 · Accepted Answer · answered Aug 21 '12 at 05:45

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/

score 3 · Answer 2 · answered Aug 21 '12 at 05:39

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>')
}

answered Aug 21 '12 at 05:39

Ram

143,282
16
168
197

score 1 · Answer 3 · edited May 29 '15 at 16:17

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>");

                                }

                            }

If you want us to answer your questions in the future, i would recommend to mark one of the replies as the answer, it would be appreciated. — Rob Angelier, Aug 21 '12 at 13:16
@RobAngelier sorry, i just did it didnt notice it, in any case i pasted my code so it can help someone with the same problem, thanks! — Solar Confinement, Aug 21 '12 at 17:05

score 1 · Answer 4 · edited Aug 12 '20 at 06:35

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>

Populate html table on jQuery success event

4 Answers4

Linked