jquery append dynamic data in tr

Question

I'm trying to print my dynamic data in table, i can get my data but tr part in tbody has issue

each one of this data should show in separate tr but they all print in 1 tr only.

This is the code of my issue part

var jqrajdate = '';
var jqrajtime = '';
var jqrajcity = '';
var jqrajdescription = '';
$.each(manifest, function(key3, value3) {
  jqrajdate += value3['manifest_date'];
  jqrajtime += value3['manifest_time'];
  jqrajcity += value3['city_name'];
  jqrajdescription += value3['manifest_description'];
});
  $('div#proccess').append(
    '<div class="mb-20"><h4>Riwayat pengiriman</h4></div>'+
    '<table id="table" class="table table-bordered table-hover table-responsive">'+
    '<thead>'+
      '<th class="text-center">Tanggal</th>'+
      '<th class="text-center">Jam</th>'+
      '<th class="text-center">Kota</th>'+
      '<th class="text-center">Keterangan</th>'+
    '</thead>'+

    '<tbody>'+
      '<tr>'+
        '<td class="text-center">'+jqrajdate+'</td>'+
        '<td class="text-center">'+jqrajtime+'</td>'+
        '<td class="text-center">'+jqrajcity+'</td>'+
        '<td class="text-center">'+jqrajdescription+'</td>'+
      '</tr>'+
    '</tbody>'+
  '</table>'
  );

Can anyone help me with fixing my tr issues?

Answer 1

I assume that your manifest is an array of objects, containing the keys manifest_date , manifest_time , and etc. In this case, you are doing it incorrectly because you are concatenating/collapsing all values into a single variable and then printing a single <tr> element. What you need to do is to move all that logic into the the $.each() loop instead.

You don't actually have to use .$each() , using a normal Array.prototype.forEach() should work. What you need to do is:

1. Create the necessary markup, but leave the <tbody> element empty
2. Since you are using the same keys to access the data, you can pre-declare them in an array to be used later
3. Loop through all entries in manifest . For each data row, you:
   • Create a new <tr> element
   • Loop through the keys (see step 2), and for each key you access, you create a new <td> element and append it to the ` element
   • Once you're done, append the <tr> element to your table's <tbody> element

See sample code below:

// 1. Create the markup and empty table beforehand
$('div#process').append('<div class="mb-20"><h4>Riwayat pengiriman</h4></div>'+
  '<table id="table" class="table table-bordered table-hover table-responsive">'+
  '<thead>'+
    '<th class="text-center">Tanggal</th>'+
    '<th class="text-center">Jam</th>'+
    '<th class="text-center">Kota</th>'+
    '<th class="text-center">Keterangan</th>'+
  '</thead>'+
  '<tbody></tbody>'+
  '</table>');

// 2. Loop through all entries in your array
var keys = ['manifest_date', 'manifest_time', 'city_name', 'manifest_description'];
manifest.forEach(function(row) {
  var $row = $('<tr />');

  keys.forEach(function(key) {
    $row.append('<td>' + row[key] + '</td>');
  });

  $('#table tbody').append($row);
});

Proof-of-concept example:

 // Dummy data var manifest = [{ 'manifest_date': 'date1', 'manifest_time': 'time1', 'city_name': 'city1', 'manifest_description': 'Lorem ipsum dolor sit amet 1' }, { 'manifest_date': 'date2', 'manifest_time': 'time2', 'city_name': 'city2', 'manifest_description': 'Lorem ipsum dolor sit amet 2' }, { 'manifest_date': 'date3', 'manifest_time': 'time3', 'city_name': 'city3', 'manifest_description': 'Lorem ipsum dolor sit amet 3' }]; // 1. Create the markup and empty table beforehand $('div#process').append('<div class="mb-20"><h4>Riwayat pengiriman</h4></div>' + '<table id="table" class="table table-bordered table-hover table-responsive">' + '<thead>' + '<th class="text-center">Tanggal</th>' + '<th class="text-center">Jam</th>' + '<th class="text-center">Kota</th>' + '<th class="text-center">Keterangan</th>' + '</thead>' + '<tbody></tbody>' + '</table>'); // 2. Loop through all entries in your array var keys = ['manifest_date', 'manifest_time', 'city_name', 'manifest_description']; manifest.forEach(function(row) { var $row = $('<tr />'); keys.forEach(function(key) { $row.append('<td>' + row[key] + '</td>'); }); $('#table tbody').append($row); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="process"></div>