无法访问 JSON 对象数组，让我发疯

Question

我已经坚持了一天，我快疯了。可能真的很简单，但这里有。

我有一个 jQuery.Ajax 方法，它调用一个检索订单列表的 WebMethod。 jQuery方法是这样的……

/* Get orders by the current logged in employee's department */
    function getOrdersByDept(department, filter, dateFrom, dateTo) {
        var dto = {};
        dto['department'] = department;
        dto['filter'] = filter;
        dto['dateFrom'] = dateFrom;
        dto['dateTo'] = dateTo;
        $.ajax({
            type: 'POST',
            url: 'ProcessPO.aspx/GetOrdersByDept',
            data: JSON.stringify(dto),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
                displayOrders(data.d);
            },
            error: function (xhr, status, errorThrown) {
                alert(xhr.responseText);
            }
        });
    }

返回此 JSON...

从此 WebMethod...

[WebMethod]
    public static List<Order> GetOrdersByDept(Department department, Filter filter, DateTime? dateFrom = null, DateTime? dateTo = null)
    {
        return OrderLists.GetOrdersByDepartment(department, filter, dateFrom, dateTo);
    }

现在是 displayOrders 代码...

/* Fill the orders table. */
    function displayOrders(data) {
        $('#gdvOrders tbody').empty();
        for (var key in data) {
            var altRow;
            if (key % 2 == 0)
                altRow = 'class="alt-row"';
            else
                altRow = '';
            /* Convert JSON formatted date to readable short date format */
            var orderDate = data[key].OrderDate.substr(6);
            var currentTime = new Date(parseInt(orderDate));
            var month = currentTime.getMonth() + 1;
            var day = currentTime.getDate();
            var year = currentTime.getFullYear();
            orderDate = day + "/" + month + "/" + year;

            var orderStatus;
            switch (data[key].Status) {
                case 0:
                    orderStatus = 'Pending';
                    break;
                case 1:
                    orderStatus = 'Closed';
                    break;
            }
            $('#gdvOrders tbody').append($('<tr ' + altRow + '><td>' + data.d[key].OrderId + '</td>' +
                                                '<td>' + orderDate + '</td>' +
                                                '<td>' + data[key].EmployeeName + '</td>' +
                                                '<td>' + data[key].Items + '</td>' +
                                                '<td>$' + data[key].SubTotal.toFixed(2) + '</td>' +
                                                '<td>$' + data[key].TaxTotal.toFixed(2) + '</td>' +
                                                '<td>$' + data[key].GrandTotal.toFixed(2) + '</td>' +
                                                '<td>' + orderStatus + '</td></tr>'));
        }
        $('#gdvOrders tbody td:nth-child(4)').hide();
        $('#gdvOrders tbody td:nth-child(5)').hide();
        $('#gdvOrders tbody td:nth-child(6)').hide();
    }

每个订单都有一个 Items 的属性，基本上是一个 List。我将其存储在表格的第 4 列中并将其隐藏。当用户单击表中的行/顺序时，我想将每个项目的另一个列表加载到另一个表中。为您查看而剥离的订单行的点击功能是这样的......

$('#gdvOrders tbody tr').live('click', function () {
            displayItems($(this).find('td:nth-child(4)').text());
});

现在 displayItems 函数被定义为这样...

function displayItems(data)

我尝试了许多不同的方法来遍历数据，当我...

alert(data) 

我收到...

[object Object], [object Object]

当我尝试遍历它时（尝试了几种不同的方法），我得到了未定义的结果，或者当我尝试 data[0] 时，data1 会显示 o 等字符，以此类推。基本上只是给我返回 [object Object] 的每个字符而不是数组中的对象。我做错了什么？

Answer 1

试试：

        success: function (data) {
            displayOrders(data.d);
        },

Answer 2

更改这些行

data: '{"department": "' + department + '", "filter": "' + filter + '", "dateFrom": "' + dateFrom + '", "dateTo": "' + dateTo + '"}',
contentType: 'application/json; charset=utf-8',
dataType: 'json',

简单

data: dataObj, 
dataType: 'json',

在 ajax 之前根据您的方便在 json 对象或数组中创建数据

var dataObj = {};
dataObj['department'] = department;
dataObj['filter'] = filter;
dataObj['dateFrom'] = dateFrom;
dataObj['dateTo'] = dateTo;

并在数据中使用这个dataObj并删除co​​ntentType，同时发送数据jquery本身会将dataObj转换成这样的键值对

department=valueofdepartment&filter=valueoffilter&....

Answer 3

您在不使用控制台的情况下是否做到了这一点？

alert()不会显示对象，你应该使用console.log(data)查看对象结构，然后这样做：

var key2 = data.key1.key2

等等……

要迭代使用

$.each(data, function(index, item) {
  console.log(item); 
});

或（您的脚本中已经使用了哪个？）

for (var key in data) {
   console.log(data[key]);
}

另一方面，这个：

$(this).find('td:nth-child(4)').text();

会给你一个文本字符串，而不是一个对象，因此命名为text()，这就是你传递给displayItems()函数的内容，一个文本字符串，或者在你的情况下你可能没有点击瞄准，什么也不通过。

当对字符串执行text[4] 时，它会得到文本字符串中的第五个字母。

尝试做：

$('#gdvOrders tbody tr').live('click', function () {
    var data = $(this).find('td:nth-child(4)').text();
    console.log(data);
    displayItems(data);
});

看看控制台说了什么？如果使用较新版本的 jQuery，请考虑移至 on()。

Answer 4

所以最终结果必须在 displayOrders 的行中...

+ '<td>' + data[key].Items + '</td>' +

我不得不使用..

+ '<td>' + JSON.stringify(data[key].Items) + '</td>' + 

并且在行中

$('#gdvOrders tbody tr').live('click', function () {
    displayItems($(this).find('td:nth-child(4)').text());
});

我不得不把它改成……

$('#gdvOrders tbody tr').live('click', function () {
    displayItems(JSON.parse($(this).find('td:nth-child(4)').text()));
});

这让我可以用...遍历它

function displayItems(data) {
    for (var key in data) {
        /* this can be accessed like */
        data[key].PropertyName
    }
}

似乎发生了一些转换，但它确实有效。谢谢大家的意见！

Answer 5

这个问题与我的类似，在 AJAX 之后，我失去了对 OO JS 类成员的访问权限。解决方案很简单。在调用 $.getJSON() 之前，执行 'var obj = this;'然后您可以在 .done() 之后访问您的所有班级成员/资源。