将 json 数据返回给 $.ajax 函数答案

【问题标题】：Return back json data to $.ajax function将 json 数据返回给 $.ajax 函数
【发布时间】：2016-09-16 10:56:17
【问题描述】：

我已经从 web api 控制器操作中以 json 的形式在这一行得到回复：

var json = await response.Content.ReadAsStringAsync();

响应的简短版本是这样的：

{
    "Response": {
        "ResponseStatus": 1,
        "Error": {
            "ErrorCode": 0,
            "ErrorMessage": ""
        },
        "TraceId": "83b04f8c-f7dd-4755-9767-b0c861ea9e28",
        "Origin": "DEL",
        "Destination": "BOM",
        "Results": [
            [{
                "ResultIndex": "OB12",
                "Source": 6,
                "Fare": {
                    "Currency": "INR",
                    "OtherCharges": 58.29,
                    "ChargeBU": [{
                        "key": "TBOMARKUP",
                        "value": 8.29
                    }, {
                        "key": "CONVENIENCECHARGE",
                        "value": 0
                    }, {
                        "key": "OTHERCHARGE",
                        "value": 50.00
                    }],
                    "Discount": 0,
                },
            }]
        ]
    }
}

完整版见http://pastebin.com/eEE72ySk

然后我从 webApi 控制器返回 HttpResponse，方法是将此 json var 数据发送到 CreateResponse 方法并返回如下所示的 res：

HttpResponseMessage res = Request.CreateResponse(HttpStatusCode.OK, json);
return res;

我必须在视图页面上将此 res 返回到 $.ajax 函数：

$.ajax(
{
    url: "/api/Flight/SearchFlight",
    type: "Post",
    data: $('form').serialize() + '&' + $.param({ 'TokenId': $("#pageInitCounter").val()}, true),
    success: function (data) {
        alert(data);
        var items = [];
        $.each(data, function (key, val) {
            items.push(key + ' : ' + val + '</br>');
        });    
    }
});

我可以在警告框中看到全部内容。我想知道如何遍历我返回的每一个数据，并将它们的值分配给视图页面上的相应 <div> 元素。我得到的响应包含几个数组和数组到数组中。我很困惑如何管理每一个数据。

【问题讨论】：

标签： javascript jquery json ajax asp.net-mvc

【解决方案1】：

使用索引器访问数组，对于包含数组的数组，您可以使用

XXX[0][0].YYY

访问第一个数组中的第一个数组。

访问您的某些属性的代码是

$.ajax(
{
    url: "/api/Flight/SearchFlight",
    type: "Post",
    data: $('form').serialize() + '&' + $.param({ 'TokenId': $("#pageInitCounter").val()}, true),
    success: function (data) {
        var responseStatus = data.Response.ResponseStatus; // returns 1
        var errorCode = data.Response.Error.ErrorCode; // returns 0
        var origin = data.Response.Origin; // returns 'DEL'
        var resultIndex = data.Response.Results[0][0].ResultIndex; // returns 'OB12'
    }
});

数组中的大多数数据似乎只包含一个对象，或者一个数组包含一个对象，如果总是这样，那么使用[0] 或[0][0] 访问它就可以了。

对于包含多个对象的数组，例如data.Response.Results[0][0].Fare.ChargeBU，可以使用for循环或$.each()循环，例如

$.each(data.Response.Results[0][0].Fare.ChargeBU, function (index, chargeBU) {
    var key = chargeBU.key // returns "TBOMARKUP", "CONVENIENCECHARGE", "OTHERCHARGE"
});

【讨论】：

我试过这个： $.each(data.Response.Results, function (i, item) { $("#results1").append('
' + item.Name + '
'); });错误是：未捕获的类型错误：无法读取未定义的属性“结果”。同样的错误是 var responseStatus 现在我已经注释掉了所有四个 var。
不是$.each(data.Response.Results, function (i, item) { 而是$.each(data.Response.Results[0][0].Fare.ChargeBU, function (index, chargeBU) { - 您需要仔细阅读答案。我已经测试了所有这些并且它的工作正常。如果您仍然有麻烦，我会创建一个小提琴来证明它。
那么您在该图像中显示的数据并不是您真正得到的数据。稍后我会为你制作一个小提琴（给我 30-40 分钟）
先生，在结果中它给了我 25 个数组，我在这个链接中向你展示了两个：pastebin.com/YNthgivV 正如你所说我尝试了这个：var responseStatus = data.Response.ResponseStatus; $('#divResult1').append(responseStatus); 但它给了我错误 Uncaught TypeError: Cannot读取未定义的属性“ResponseStatus”
另一个更新了fiddle 以显示每个循环。

【解决方案2】：

试试这个

{
    url: "/api/Flight/SearchFlight",
    type: "Post",
    data: $('form').serialize() + '&' + $.param({ 'TokenId': $("#pageInitCounter").val()}, true),
    success: function (data) {
        alert(data);
        var items = [];
        $.each(data.Response.Results, function (key, val) {
            items.push(key + ' : ' + val + '</br>');
        });
    }
};

【讨论】：