up vote 1 down vote favorite
share [g+] share [fb]

I'm having a problem getting certain parts of a JSON array to display in a datatable.

Here is 1 section of the array.

[
    {
        "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"
    },

Here is my datable 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'])          
    });       
});

Heres is my callback function.

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);
            }
        });
    }
}

I can plot certain parts of the JSON array fine. As you can see, things like description, lineStatus, and statusStamp work fine. If I dig into it it doesn't work. This is what I have tried.` 

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

I'm trying to get to more information lower into the array. It's not working. I'm guessing it may have something to do with the callback function.

If I try those values I get this back.

Datatables warning: requested unknown parameter '0' for the datasource on row '0'.

Just wondering what is going on here. Thanks a lot.

link|improve this question
99% accept rate
feedback

1 Answer

up vote 1 down vote accepted

The problem in the callback is that it's not iterating right to go deeper than one level. This is because item['pkgLineTree.class'] is obviously undefined (you should access i like this: item['pkgLineTree']['class']) and so you are passing undefined values to datatables. So you have to work a little, something like this should work:

$.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);
});

If it doesn't work i'll try it better when i'm at home, i'v created this simplified fiddle and it works.http://jsfiddle.net/njsYh/1/

EDIT - i've tried it and it works for me. Of course you can go to deeper level by separating each level with a dot.

link|improve this answer
Thank you so much. Sorry it took so long to get back. Just tested it. Works great! I'm able to dig all the way in all the way in to the object. – Drew H May 29 '11 at 17:34
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.