получить и показать конкретное значение через JQuery

Question

Мне нужна помощь, я использую сервис Web Api из приложения MVC ASP.NET, использующего функцию jQuery $ .ajax, и мне нужно извлечь конкретную запись из базы данных, я могу подключиться к сервису и получить правильное значение в соответствии с предоставленным идентификатором, но я могу показать результат в таблице, я проверил имена свойств, и все хорошо, это мой код JavaScript

 $("#boton_de_pabletoreto2").click(function () {
            var id = $("#busqueda").val();
            $.ajax({
                type: "GET",
                url: "http://localhost:55987/api/Empleado/"+ id,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data != null)
                    {
                        $.each(data, function (i, item) {
                            var rows = "<tr>" +
                                "<td id='id'>" + item.id + "</td>" +
                                "<td id='nombres'>" + item.Nombres + "</td>" +
                                "<td id='cargo'>" + item.Cargo + "</td>" +
                                "<td id='dpto'>" + item.Dpto + "</td>" +
                                "</tr>";
                            $('#Table').append(rows);
                        });
                        console.log(data);
                    }
                    else
                    {
                        alert("no se encontrarón datos");
                    }

                },
                failure: function (data) {
                    alert(data.responseText);
                },
                error: function (data) {
                    alert(data.responseText);
                }

            });
        });

и вот что он показывает

Я знаю, что он извлекает запись, потому что из кода получил должную запись в консоли

и это HTML-код

<div class="panel panel-primary">

    <div class="panel-heading">
        $.ajax pabletoreto
    </div>

    <div class="panel-body">
        ID: <input type="text" id="busqueda"><br /><br />
        <table class="table table-bordered" id="Table">
            <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>Departamento</th>
                <th>Cargo</th>
            </tr>
        </table>
    </div>
    <div class="row">
        <div class="col-md-2 offset-md-2"><button id="boton_de_pabletoreto">Obtener Todos</button></div>
        <div class="col-md-1"><button id="boton_de_pabletoreto2">Búsqueda</button></div>
    </div>

    <br />

Я использую точно такой же код (за исключением того, что не нужно указывать значение идентификатора и соответствующий URL: "http://localhost:55987/api/Empleados"), чтобы получить все записи, и это работает

Answer 1

Я знаю, что он извлекает запись, потому что из кода получил должную запись в консоли

Поскольку вы получаете только одну запись в качестве объекта json (не массива), .each () выполняет итерации для каждого свойства (это ваша проблема .... ваши неопределенные элементы):

var data = {id: 1, Nombres: 'Pablo Ern...', Cargo: 'Gerente', Dpto: 'Contabi...'};
    $.each(data, function (i, item) {
        console.log('Item(' + i + '): ' + item);
});

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

В этом случае я предлагаю избежать зацикливания и непосредственного использования объекта json:

var item = {id: 1, Nombres: 'Pablo Ern...', Cargo: 'Gerente', Dpto: 'Contabi...'};
var rows = "<tr>" +
        "<td id='id'>" + item.id + "</td>" +
        "<td id='nombres'>" + item.Nombres + "</td>" +
        "<td id='cargo'>" + item.Cargo + "</td>" +
        "<td id='dpto'>" + item.Dpto + "</td>" +
        "</tr>";
$('#Table').append(rows);

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


<div class="panel panel-primary">

    <div class="panel-heading">
        $.ajax pabletoreto
    </div>

    <div class="panel-body">
        ID: <input type="text" id="busqueda"><br/><br/>
        <table class="table table-bordered" id="Table">
            <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>Departamento</th>
                <th>Cargo</th>
            </tr>
        </table>
    </div>
    <div class="row">
        <div class="col-md-2 offset-md-2">
            <button id="boton_de_pabletoreto">Obtener Todos</button>
        </div>
        <div class="col-md-1">
            <button id="boton_de_pabletoreto2">Búsqueda</button>
        </div>
    </div>

    <br/>
</div>

Answer 2

Я думаю, что вы ошиблись for each loop:

Изменить это:

$.each(data, function (i, item) { // Here is the error
    var rows = "<tr>" +
        "<td id='id'>" + item.id + "</td>" +
        "<td id='nombres'>" + item.Nombres + "</td>" +
        "<td id='cargo'>" + item.Cargo + "</td>" +
        "<td id='dpto'>" + item.Dpto + "</td>" +
        "</tr>";
    $('#Table').append(rows);
});

С этим:

$.each(data, function (item, i) {
    var rows = "<tr>" +
        "<td id='id'>" + item.id + "</td>" +
        "<td id='nombres'>" + item.Nombres + "</td>" +
        "<td id='cargo'>" + item.Cargo + "</td>" +
        "<td id='dpto'>" + item.Dpto + "</td>" +
        "</tr>";
    $('#Table').append(rows);
});

Другая ошибка заключается в том, что data - это не список сотрудников, а сотрудник. Итак, вы перебираете объект, а не список. Изменить бэкэнд для отправки списка сотрудников вместо сотрудников ...