使用 jQuery 数据表显示高级 JSON 数组的问题

Question

我在将 JSON 数组的某些部分显示在数据表中时遇到问题。

这是数组的 1 个部分。

[
    {
        "description": "Testing",
        "lineStatus": "OK",
        "persistent": true,
        "pkgLineId": 102,
        "pkgLineTree": {
            "class": "models.PkgLineTree",
            "entityId": 1,
            "persistent": true,
            "pkgLineTreeId": 1,
            "treeId": {
                "class": "models.Tree",
                "entityId": 61,
                "name": "Test",
                "parentId": {
                    "class": "models.Tree",
                    "entityId": 57,
                    "name": "East",
                    "parentId": {
                        "class": "models.Tree",
                        "entityId": 52,
                        "name": "Test3",
                        "parentId": null,
                        "persistent": true,
                        "treeId": 52,
                        "webname": "coke"
                    },
                    "persistent": true,
                    "treeId": 57,
                    "webname": "east"
                },
                "persistent": true,
                "treeId": 61,
                "webname": "collegepark"
            }
        },
        "shortname": "Line 1A",
        "statusStamp": 1305726508000,
        "timezone": "US/Eastern",
        "webname": "line1a"
    },

这是我的数据 javascript。

 $(window).load(function() {       

    var insertedTable =  $('#pkgLineTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": false,       
        "bProcessing": true,
        "bServerSide": false,
        "sAjaxSource": 'json/pkglinelist',
        "fnServerData": fnServerObjectToArray(['shortname', 'description', 'lineStatus', 'statusStamp'])          
    });       
});   

这是我的回调函数。

fnServerObjectToArray = function (aElements) {     

    return function (sSource, aaData, fnCallback) {
        $.ajax({
            "dataType": 'json',
            "type": "GET",
            "url": sSource,
            "data": aaData,
            "success": function (json) {
                var a = [];
                $.each(json, function(index, item) {     
                    var inner = [];
                    for (var i = 0, iLen = aElements.length; i < iLen; i++) {
                        inner.push(item[aElements[i]]);
                    }
                    a.push(inner);
                });
                json.aaData = a;               
                fnCallback(json);
            }
        });
    }
}

我可以很好地绘制 JSON 数组的某些部分。如您所见，description、lineStatus 和 statusStamp 等内容都可以正常工作。如果我深入研究它是行不通的。这是我尝试过的。`

  "fnServerData": fnServerObjectToArray(['pkgLineTree.class', 'pkgLineTree.entityId', 'lineStatus', 'statusStamp']) 

我正在尝试在数组中获取更多信息。它不工作。我猜这可能与回调函数有关。

如果我尝试这些值，我会得到它。

数据表警告：为行“0”上的数据源请求未知参数“0”。

只是想知道这里发生了什么。非常感谢。

Answer 1

回调中的问题在于它没有正确地迭代到更深的一层。这是因为 item['pkgLineTree.class'] 显然是未定义的（您应该像这样访问 i：item['pkgLineTree']['class']），因此您将未定义的值传递给数据表。 所以你必须做一些工作，这样的事情应该可以工作：

$.each(json, function(index, item) {     
       var inner = [];
       for (var i = 0, iLen = aElements.length; i < iLen; i++) {
          var str = aElements[i];
          var array = str.split('.');//this splits the Element if it has a dot
          var subObject = null;
          for (l = 0; l < array.length; l++){
               if (subObject){//if subObject has a value (this means it's not the firs iteration of the cycle, go one level deeper
                    subObject = subObject[array[l]];
               }else{//else go one level deep into item
                    subObject = item[array[l]];
               }
            }
            inner.push(subObject);
        }
        a.push(inner);
});

如果它不起作用，我会在家时更好地尝试，我创建了这个简化的小提琴并且它有效。http://jsfiddle.net/njsYh/1/

编辑 - 我已经尝试过了，它对我有用。当然，您可以通过用点分隔每个级别来进入更深层次。