ajax and json problem

spasco

I have the Datatable working fine with AJAX as per the examples. The JSON populating the datatable looks like this:

{ "aaData": [
["Trident","Internet Explorer 4.0","Win 95+","4","X"],
["Trident","Internet Explorer 5.0","Win 95+","5","C"],
["Trident","Internet Explorer 5.5","Win 95+","5.5","A"]
] }

Now, the actual JSON I have to work with looks like this:

[
{
"user_ooi_id": "3f27a744-2c3e-4d2a-a98c-050b246334a3",
"data_resource_id": "fd204aa3-2faa-4d49-84ee-457094666b23",
"title": "NDBC Sensor Observation Service data",
"institution": "NOAA National Data Buoy Center (http://www.ndbc.noaa.gov/)",
"source": "NDBC SOS"
},
{
"user_ooi_id": "3f27a744-2c3e-4d2a-a98c-050b246334a3",
"data_resource_id": "fd204aa3-2faa-4d49-84ee-457094666b23",
"title": "NDBC Sensor Observation Service data",
"institution": "NOAA National Data Buoy Center (http://www.ndbc.noaa.gov/)",
"source": "NDBC SOS"
}
]

What's the best way to transform my JSON to the format required by DataTable?

Here's my Datatable settings:

$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": 'service/list',
"aoColumns": [
/* Id */ {"bVisible": false},
/* Title */ null,
/* Provider */ null,
/* Format */ null,
/* Type */ null,
/* MetaInfo */ {"bVisible":false},
/* Publisher Info */ {"bVisible":false},
/* Creator Info */ {"bVisible":false}
],
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});


Thanks,
Stephen

allan

This is how it can be done with fnServerData:

[code]
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": '../examples_support/json_source_object.txt'
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json) {
var a = [];
for ( var i=0, iLen=json.aoData.length ; i

allan

In fact - here you go: http://datatables.net/plug-ins/server-data-formats#json_object - single call to a function with an array of strings - couldn't be easier :-)

Allan

xiongxao

I cannot get the above example (the link example) to work. Also noticed the first example, you're using json.aoData vs the link example it's json.aaData. Which should I use? "json.aoData" or "json.aaData"?

Appreciate your help...

JavaScript:
--------------------------------------------------------------------------------
[code]
fnServerObjectToArray = function (aElements) {
return function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json) {
var a = [];
for (var i = 0, iLen = json.aaData.length; i < iLen; i++) {
var inner = [];
for (var j = 0, jLen = aElements.length; j < jLen; j++) {
inner.push(json.aaData[i][aElements[j]]);
}
a.push(inner);
}
json.aaData = a;
fnCallback(json);
}
});
}
}

$(document).ready(function () {
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": '/Resources/Contents/json_source_object.txt',
"fnServerData": fnServerObjectToArray(['engine', 'browser', 'platform', 'version', 'grade'])
});
});
[/code]

json_source_object.txt:
--------------------------------------------------------------------------------
[code]
{ "aaData": [
{
"engine": "Trident",
"browser": "Internet Explorer 4.0",
"platform": "Win 95+",
"version": "4",
"grade": "X"
},
{
"engine": "Trident",
"browser": "Internet Explorer 4.0",
"platform": "Win 95+",
"version": "5",
"grade": "C"
}
] }
[/code]

HTML:
--------------------------------------------------------------------------------
[code]



Rendering engine
Browser
Platform(s)
Engine version
CSS grade




Loading data from server












[/code]

xiongxao

Got it to work, changed "POST" to "GET". Thanks.