Question

我需要一些帮助，我正在使用jQuery函数$ .ajax从MVC ASP.NET App中使用Web Api服务，并且需要从数据库中检索特定记录，我可以连接到该服务并检索根据提供的ID正确设置值，但我可以设法在表格中显示结果，我已经检查了属性名称，一切都很好，这是我的JavaScript代码

I/System.out: 1558 10 *~FETCH DATA#checkWifiConnection: start

这就是它的显示

Stream.collect(Collector)

我知道它检索到一条记录，因为从代码中在控制台中得到了应有的记录

Codepen

这是HTML代码

 $("#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);
                }

            });
        });

我使用完全相同的代码（除了不需要提供id值和适当的URL：“ ”）来检索所有记录，并且可以正常工作

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不是雇员列表，而是雇员。因此，您要遍历对象而不是列表。更改后端以发送员工列表，而不是雇员...

通过jQuery检索并显示特定值

2 个答案: