current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 2 down vote favorite

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.

share|improve this question

1 Answer 1

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.

share|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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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