在 jQuery AJAX 成功回调中解析 JSON 列表（通过 C#）答案

【问题标题】：Parse JSON List (via C#) in jQuery AJAX Success Callback在 jQuery AJAX 成功回调中解析 JSON 列表（通过 C#）
【发布时间】：2018-02-05 20:32:33
【问题描述】：

我正在使用 jQuery 的 AJAX 方法调用 C# 服务以返回 JSON 序列化列表。

[HttpPost]
public JsonResult SearchTicket(ViewModelTicket ticket) {

    var list = UnitOfTicket.Where(x =>x.TicketId == ticket.TicketId);

    return Json(new { list  }, JsonRequestBehavior.AllowGet);
}

我从成功回调函数中解析响应并将其呈现为 HTML。

 $.ajax({
        type: "POST",
        url: url,
        data: JSON.stringify(Ticket),
        dataType: "json",
        contentType: 'application/json; charset=utf-8',
        success: function (list) {
            var data = list;
            for (var i in data) {
                alert(JSON.stringify(data[i]));
                $('#tbody-element').append(
                     '<tr>' +
                         '<td>' + data[i].TicketId + '</td>' +
                         '<td>' + data[i].Title + '</td>' +
                         '<td>' + data[i].PriorityId + '</tr>' +
                         '<td>' + data[i].OpenDateAndTime + '</tr>' +
                         '<td>' + data[i].SlaExpiration + '</td>' +
                     '</tr>'
                 );
             }
         },
         error: function () {
             alert("Error occured!!")
         }
     });

响应显示在警报中：

[{"TicketId":1,"OpenDateAndTime":"/Date(1517833557277)/","ClosedDateTime":null,"VersionId":140,"PriorityId":2,"CompanyId":0,"UserId":null,"Rate":null,"SlaExpiration":null,"TicketTypeId":1,"StatusId":1,"ProductId":1,"SubProductId":1,"TaskId":1,"Title":"Primeiro Chamado","Files":null}]

我的问题是渲染一个未定义值的对象。例如：data[i].Title ...

我正在关注这个帖子：Parse returned C# list in AJAX success function

【问题讨论】：

测试是否未定义 -if (data[i]) { ... } else { ..}
而且您只需要对象的 5 个属性，因此您应该只返回这 5 个属性，而不是所有属性

标签： javascript jquery asp.net-mvc

【解决方案1】：

如果您尝试alert(JSON.stringify(data))，您会看到什么？您的代码就像 data 是一个对象数组一样工作，但它实际上可能是一个充满嵌套数组的数组。

如果alert(JSON.stringify(data[i])); 向您显示[{"TicketId":...}]，则看起来data[i] 是一个包含单个对象的数组——在这种情况下，data[i].TicketId 未定义但data[i][0].TicketId 应该具有您想要的值。如果是这种情况，全面使用 data[i][0] 而不是 data[i] 应该可以帮助您。

注意：不过，我会小心使用for (var i in data)，因为如果data 是Array，并且您有任何类型的数据添加到Array.prototype（例如，填充数组方法），那么它将包含在此循环中。使用起来会更安全：

for (var i in data) {
    if (data.hasOwnProperty(i)) {
        ...
    }
}

【讨论】：

发生这种情况的原因是当正确的代码只是return Json(list, JsonRequestBehavior.AllowGet);时，OP使用return Json(new { list }, JsonRequestBehavior.AllowGet);

【解决方案2】：

$.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(Ticket),
    dataType: "json",
    contentType: 'application/json; charset=utf-8',
    success: function (list) {
        for(var i = 0, len = list.length; i < len; i++) {
            $('#tbody-element').append(
                 '<tr>' +
                     '<td>' + list[i].TicketId + '</td>' +
                     '<td>' + list[i].Title + '</td>' +
                     '<td>' + list[i].PriorityId + '</tr>' +
                     '<td>' + list[i].OpenDateAndTime + '</tr>' +
                     '<td>' + list[i].SlaExpiration + '</td>' +
                 '</tr>'
             );
        }
    },
    error: function () {
        alert("Error occured!!")
    }
});

您的响应已被解析，这意味着您的 list 变量是一个数组。

【讨论】：