Populate HTML Table using AJAX - node.js

Question

I am getting details from mongodb using express api and calling it using AJAX in front-end, i am able to get the details but not able to display it in a table.
I have tried appending it in a table. I have attached some code on what i have done.
The AJAX Part
$.ajax({
type: 'GET',
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "http://localhost:8000/employees",
success:function(data){
data.forEach(element => {
$("#Name").append("<td>"+element.Name+"</td>");
$("#EmployeeId").append("<td>"+element.EmpId+"</td>");
$("#Designation").append("<td>"+element.Designation+"</td>");
$("#Email").append("<td>"+element.Email+"</td>");
});
},
error:function( errorMessage)
{
console.log(errorMessage);
}
});
The HTML part
<table>
<th>Name</th><th>EmployeeId</th><th>Designation</th><th>Email</th>
<tr>
<td id="Name"></td>
<td id="EmployeeId"></td>
<td id="Designation"></td>
<td id="Email"></td>
</tr>
</table>
I am currently getting entire output in single
i want the data in separate .
Current Output

Answer 1

You're getting all the data put into the same td because you're only using one row.
The way your code is running is basically...
<td id="Name">
<td>{value1}</td><td>{value2}</td>
</td>
....
You need to create rows tr inside the callback, instead of just appending data to the columns td
What you can do to fix this, is building entire rows in the success callback..
$.ajax({
type: 'GET',
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "http://localhost:8000/employees",
success:function(data){
data.forEach(element => {
var row = document.createElement("tr");
var name = document.createElement('td');
var employeeID = document.createElement('td');
var designation = document.createElement('td');
var email = document.createElement('td');
name.innerHTML = element.Name;
employeeID.innerHTML = element.EmpID;
designation.innerHTML = element.Designation;
email.innerHTML = element.Email;
row.appendChild(name);
row.appendChild(employeeID);
row.appendChild(designation);
row.appendChild(email);
$('#table').append(row);
});
},
error:function( errorMessage)
{
console.log(errorMessage);
}
});
and in your HTML, just apply the ID to table or whatever you want.
Edit::
Also, syntactically, you should put the table headers inside a row as well, so,
<tr>
<th>Name</th>
<th>Employee ID</th>
...
</tr>