Use datatable to display unstructured object arrays.

Sawyer

My ajax response will return an array of objects with variable key combinations, for example:

[
{key1: value, key2: value},
{key1: value, key3: value},
{key2: value, key3: value, key4: value}
]


I need to present these data in a tabular format, like:
key1 key2 key3 key4
value value blank blank
value blank value blank
blank blank value value

that's to say, I need to build the table according to the returned json array.
Is there any way to achieve this using data tables?

codemonk

if i understand your question, keyX is column and value is the data. This will work fine in datatables. Do you want help building the table? or are you stuck somewhere?

you might have to reorganize your json or array of objects to include all the keys. example:

[code]
{key1: value, key2: value,key3: value, key4: value},
{key1: value, key2: value,key3: value, key4: value},
{key1: value, key2: value,key3: value, key4: value},
{key1: value, key2: value,key3: value, key4: value},
[/code]

UPDATE: sorry for this miss info.

Sawyer

@codemonk, from what I know about datatables, it requires a formatted data source, ie, array of object with all the same key sets, or array of arrays with same length. I tried that, my ajax response won't work out of box with datatable.

I think I need a function to build aoColumns property based on the ajax response, I don't know how.
I would be really appreciated if some one can give me some advices.

Sawyer

@codemonk, thanks for your answer, if I reconstruct my data source, I think I can use fnServerData right? but can I let datatables to automatically figure out columns without define it explicitly?

codemonk

so lets say your ajax request is something like this: (this is how im am doing it in my code)

this is not correct but just an idea

[code]
$.getJSON('URL_TO_GET_DATA', function(data){
console.log(data); //check your data
var array = [];
for(key in data)
{
//set up your conditions to build proper array
if(data[key] == "key1")
{
array.push(data[key]);
}
if(data[key] == "key2")
{
array.push(data[key]);
}
//etc for all your conditions

}
});
[/code]

codemonk

If you reconstruct your source to how datatables expect, you do not need to use fnServerData

http://datatables.net/release-datatables/examples/data_sources/server_side.html has the example of how to structure your data

UPDATE: Sorry i am assuming you can change how the json is delivered. If not the yes i believe you have to use fnServerData

allan

This can be done using mData and sDefaultContent . Set the column key to be the mData as normal, but if there is a chance that the key might be missing from the data source object, you can tell DataTables what to use instead of throwing up a warning - that is done with sDefaultContent . In this case it sounds like you want to set it to an empty string. It is also possible to set it to show `Empty` etc if required.

Allan

Sawyer

[quote]allan said: Set the column key to be the mData as normal[/quote]

Is there a way that I can tell Datatable to pick up the object key as column, instead of defining each column by hand? because in this case, I don't know what's the columns are going to be exactly. I need to build them using returned data.

allan

No - if you want automatic assignment, you need to use arrays. There is no way for DataTables to automatically determine that column 3 should use the property `accountId` (or whatever). You need to explicitly tell it that - only array indexes can be done automatically (since that's a simple counter).

Allan

Sawyer

@allan, then I am considering reconstruct the returned data, how can I build aoColumns when ajax response returned?

allan

However you want :-). DataTables won't read aoColumns from the server directly (since it could include functions, which is not valid JSON), so you'd make your own Ajax call and generate aoColumns as needed by your return format.

I would say if you are going to do that, then keep using objects - much more flexible.

Allan