Заполните таблицу HTML с помощью AJAX

Question

Я получаю информацию из mongodb с помощью Express API и вызываю его с помощью AJAX во внешнем интерфейсе, я могу получить детали, но не могу отобразить их в таблице.

Я пытался добавить ихв таблице. Я приложил некоторый код к тому, что я сделал.

Часть AJAX

$.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);
            }
        });

Часть HTML

<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>

В настоящее время я получаю весь вывод в одномхочу данные в отдельности.

Токовый выход

Answer 1

Вы получаете все данные, помещенные в один и тот же td, потому что вы используете только одну строку.

Принцип работы вашего кода в основном ...

<td id="Name">
     <td>{value1}</td><td>{value2}</td>
</td>
....

Вам нужно создать строки tr внутри обратного вызова, вместо того, чтобы просто добавлять данные в столбцы td

Что вы можете сделать, чтобы исправить это, это построить целые строки в обратном вызове success. .

$.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);
    }
});

и в своем HTML, просто примените идентификатор к table или как хотите.

Edit :: Кроме того, синтаксически, вы должны также поместить заголовки таблицы в строку, так что

<tr>
    <th>Name</th>
    <th>Employee ID</th>
    ...
</tr>