ajax and json problem
ajax and json problem
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
{ "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
This discussion has been closed.
Replies
[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
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]