无法访问JSON对象数组,让我疯狂

时间:2012-05-09 19:35:30

标签: javascript asp.net json jquery

我已经被困在这一天了,我疯了。可能是非常简单的东西,但是这里有。

我有一个调用WebMethod的jQuery.Ajax方法,该方法检索Orders列表。 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 ...

Orders

从这个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列并隐藏它。当用户单击表中的行/顺序时,我想将每个Item的另一个列表加载到另一个表中。为了您的观看而被拆除的订单行的点击功能是....

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

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

function displayItems(data)

当我......

时,我尝试了许多不同的方法来迭代数据
alert(data) 

我收到......

[object Object], [object Object]

当我尝试迭代它(尝试了几种不同的方法)时,我得到了未定义的,或者是[当我尝试数据[0]时,数据1将显示o等等字符。基本上只是给我回来[object Object]的每个字符而不是数组中的对象。我做错了什么?

5 个答案:

答案 0 :(得分:1)

尝试:

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

答案 1 :(得分:1)

更改这些行

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&....

答案 2 :(得分:1)

没有使用控制台,你能做到这一点吗?

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()。

答案 3 :(得分:0)

所以最终结果必须在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
    }
}

似乎有点转换,但它确实有效。感谢大家的投入!

答案 4 :(得分:0)

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