Undefined value when consuming rest API in C# .NetCore

Question

When performing crud operations in the api, it does it correctly. I test it with swagger and it returns the values correctly from the API.

When I consume the API to display the data, I get the amount of data that is in the table but "undefined".

API:

public IEnumerable<Empleados> Get()
{
    return db.Empleados.ToList();
}

Calling the API:

[HttpGet]
public async Task<List<Empleados>> GetAllEmpleados()
{
        _empleados = new List<Empleados>();

        using (var httpClient = new HttpClient(_clientHandler))
        {
            using (var response = await httpClient.GetAsync("https://localhost:44310/api/Empleados"))
            {
                string apiResponse = await response.Content.ReadAsStringAsync();
                _empleados = JsonConvert.DeserializeObject<List<Empleados>>(apiResponse);
            }

            return _empleados;
        }
    }

View:

<button onclick="GetAllEmpleados()" class="btn btn-primary">Mostrar Empleados</button>
    function GetAllEmpleados() {
        $.getJSON("/Empleados/GetAllEmpleados", function (empleados) {
            $("#tblEmpleados tbody tr").remove();
            $.map(empleados, function (empleado) {
                $("#tblEmpleados tbody").append("<tr>"
                    + "<td>" + empleado.IdEmpleado + "</td>"
                    + "<td>" + empleado.Nombre + "</td>"
                    + "<td>" + empleado.Posicion + "</td>"
                    + "<td>" + empleado.Departamento + "</td>"
                    + "<td>" + empleado.Supervisor + "</td>"
                    + "<td>"
                    + "           <button class='btn-success' onclick='Edit(" + empleado.IdEmpleado + ")' style='margin-right:5px;'>Edit</button>"
                    + "           <button class='btn-danger' onclick='Delete(" + empleado.IdEmpleado + ")'>Delete</button>"
                    + "</td>"
                    +"</tr>"
                );
            });
        });
    }

The result is...

Answer 1

When I consume the API to display the data, I get the amount of data that is in the table but "undefined".

Please try to check the actual data that your API returned, if the JSON property names are stylized as camelCase, like below.

And it will cause the issue while you access the data with empleado.IdEmpleado etc.

[{"idEmpleado":1,"nombre":"blabla"...

You can try to modify the code as below, then check if it can work well.

$.map(empleados, function (empleado) {
    $("#tblEmpleados tbody").append("<tr>"
        + "<td>" + empleado.idEmpleado + "</td>"
        + "<td>" + empleado.nombre + "</td>"
        + "<td>" + empleado.posicion + "</td>"
        + "<td>" + empleado.departamento + "</td>"
        + "<td>" + empleado.supervisor + "</td>"
        + "<td>"
        + "           <button class='btn-success' onclick='Edit(" + empleado.idEmpleado + ")' style='margin-right:5px;'>Edit</button>"
        + "           <button class='btn-danger' onclick='Delete(" + empleado.idEmpleado + ")'>Delete</button>"
        + "</td>"
        + "</tr>"
    );
});