Data columns not binding with the element of HTML table - php

Question

I'm trying to display data from my PostgreSQL into an HTML table using Ajax and PHP. But it seems that the data I am getting is not binding into the columns element of HTML table, I just get back a Json string .
How can I am binding id, employee_name, employee_salary and employee_age column with 'td' element of HTML table
This is my code:
HTML
<div class="col-sm-6" style="padding-top:50px;">
<table id="employee_grid" class="table" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Salary</th>
<th>Age</th>
</tr>
</thead>
<tbody id="emp_body">
</tbody>
</table>
</div>
Ajax (binding column with element of HTML table):
$(document).ready(function(){
/* Handling get employee */
function get_employee() {
$.ajax({
type : 'GET',
url : 'response.php?action=list',
success : function(response){
response = JSON.parse(response);
var tr;
$('#emp_body').html('');
$.each(response, function( index, emp ) {
tr = $('');
tr.append("" + emp.id + "");
tr.append("" + emp.employee_name + "");
tr.append("" + emp.employee_salary + "");
tr.append("" + emp.employee_age + "");
var action =
"<div class='btn-group' data-toggle='buttons'>";
action += "<a href='#' target='_blank' class='btn btn-warning btn-xs' data-toggle='modal' data-target='#edit_model'>Edit</a>";
action += "<a href='#' target='_blank' class='btn btn-danger btn-xs'>Delete</a></div>";
tr.append(action);
$('#emp_body').append(tr);
});
}
});
}
//initialize method on load
function init() {
get_employee();
}
init();
});
PHP (query data from PostgreSQL)
<?php
include("connection.php");
$params = $_REQUEST;
$action = isset($params['action']);
$params['action'] !='' ? $params['action'] : 'list';
$empCls = new Employee();
switch($action) {
case 'list':
$empCls->getEmployees();
break;
default:
return;
}
class Employee {
protected $conn;
protected $data = array();
function __construct() {
$db = new dbObj();
$connString = $db->getConnstring();
$this->conn = $connString;
}
function getEmployees() {
$sql = "SELECT * FROM employee";
$queryRecords = pg_query($this->conn, $sql) or die("error to fetch employees data");
$data = pg_fetch_all($queryRecords);
echo json_encode($data);
}
}
?>

Answer 1

You need add <tr> & <td> tag as well while appending the responses to your table.
Changes you can add in your current code :
var tr = $('<tr></tr>'); //tr tag
//appending td >>
tr.append("<td>" + emp.id + "</td>");
tr.append("<td>" + emp.employee_name + "</td>");
tr.append("<td>" + emp.employee_salary + "</td>");
tr.append("<td>" + emp.employee_age + "</td>");
Demo Code :
var response = [{
"id": 1,
"employee_name": "xyz",
"employee_salary": 3444,
"employee_age": 23
},
{
"id": 2,
"employee_name": "xyz2",
"employee_salary": 34442,
"employee_age": 9
},
{
"id": 3,
"employee_name": "xyz3",
"employee_salary": 34443,
"employee_age": 2
}
] //this is dummy data
$(document).ready(function() {
/* Handling get employee */
function get_employee() {
/* $.ajax({
type: 'GET',
url: 'response.php?action=list',
success: function(response) {
response = JSON.parse(response);*/
$('#emp_body').html('');
$.each(response, function(index, emp) {
var tr = $('<tr></tr>'); //tr tag
//appending td >>
tr.append("<td>" + emp.id + "</td>");
tr.append("<td>" + emp.employee_name + "</td>");
tr.append("<td>" + emp.employee_salary + "</td>");
tr.append("<td>" + emp.employee_age + "</td>");
var action =
"<td><div class='btn-group' data-toggle='buttons'>";
action += "<a href='#' target='_blank' class='btn btn-warning btn-xs' data-toggle='modal' data-target='#edit_model'>Edit</a>";
action += "<a href='#' target='_blank' class='btn btn-danger btn-xs'>Delete</a></div></td>";
tr.append(action);
$('#emp_body').append(tr);
});
/*}
});*/
}
//initialize method on load
function init() {
get_employee();
}
init();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6" style="padding-top:50px;">
<table id="employee_grid" class="table" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Salary</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody id="emp_body">
</tbody>
</table>
</div>