How can I JSON.parse() the data returned from the Server?

pantho2k2

Hi,

I'm using ASP.net MVC on the server side. Basically I have a model class, I normally JsonConvert.SerializeObject(DataTableModel) and send it back to datatables.js. After the conversion the json data looks like the following;

"{
"draw":1,
"recordsTotal":2,
"recordsFiltered":2,
"data":[
         {"PONumber":"PO 1234","SupplierNumber":"SUP 123","SupplierName":"Supplier 1","ProductDescription":"SUND Salt & Pep Grinder 6/210g","POQuantity":"6","POUOM":"12","BatchQuantity":"18","BatchUOM":"24","ShelfDate":"2016/02/24","ExpireDate":"2016/03/15","CreatedDate":"2016/02/23","CreatedBy":"mohammadi","POReceiveDate":"2016/02/20","Notes":"Note 1"},
         {"PONumber":"PO 1236","SupplierNumber":"SUP 124","SupplierName":"Supplier 2","ProductDescription":"365 Cinnamon Strick Whol 6/36g*","POQuantity":"6","POUOM":"12","BatchQuantity":"18","BatchUOM":"24","ShelfDate":"2016/02/25","ExpireDate":"2016/03/31","CreatedDate":"2016/02/23","CreatedBy":"mohammadi","POReceiveDate":"2016/02/25","Notes":"Note 2"}
    ]
}"

It gets the data alright. But if I don't convert it to in _fnBuildAjax.baseAjax success into the following (between line 9 - 13) it doesn't show data.

    var baseAjax = {
        "data": data,
        "success": function (json) {
            var error = json.error || json.sError;
            if ( error ) {
                _fnLog( oSettings, 0, error );
            }

            var x = JSON.parse(json);
            oSettings.json = x;
            callback(x);

            //oSettings.json = json;
            //callback( json );
        },
        "dataType": "json",
        "cache": false,
        "type": oSettings.sServerMethod,
        "error": function (xhr, error, thrown) {
            var ret = _fnCallbackFire( oSettings, null, 'xhr', [oSettings, null, oSettings.jqXHR] );

            if ( $.inArray( true, ret ) === -1 ) {
                if ( error == "parsererror" ) {
                    _fnLog( oSettings, 0, 'Invalid JSON response', 1 );
                }
                else if ( xhr.readyState === 4 ) {
                    _fnLog( oSettings, 0, 'Ajax error', 7 );
                }
            }

            _fnProcessingDisplay( oSettings, false );
        }
    };

Following are my js code binding with datatables.

 var table = $('#example').DataTable({

    "processing": true,
    "serverSide": false,
    "ajax": {
        "url": "/Home/GetDateLogData",
        "type": "POST"            
    },

    "columns": [
        { "data": "PONumber" },
        { "data": "SupplierNumber" },
        { "data": "SupplierName" },
        { "data": "ProductDescription" },
        { "data": "POQuantity" },
        { "data": "POUOM" },
        { "data": "BatchQuantity" },
        { "data": "BatchUOM" },
        { "data": "ShelfDate" },
        { "data": "ExpireDate" },
        { "data": "CreatedDate" },
        { "data": "CreatedBy" },
        { "data": "POReceiveDate" },
        { "data": "Notes" }           
    ]
});

In the ajax part I've tried with dataSrc as well, didn't work.

  "dataSrc": function ( json ) {
      var x = JSON.parse(json);
      return x;
  },

My question, is there any builtin extender to do that, or perhaps how can I make a prototype like thing for this? I thank you in advance.

pantho2k2

I've got the solution from the stackoverflow. I was returning x in the dataSrc, it should be x.data like the following;

   dataSrc: function (json) {
            json = JSON.parse(json);
            return json.data;
        },

allan

This is correct. Thanks for posting back with the solution :-)

Allan