Importing array of objects

zenocon

I have just started experimenting with DataTables. The data I want to import has the following structure:

[ { _id: "123", foo: "bar", baz: "biz" },
{ _id: "234", foo: "abc", baz: "zip" } ]

So, just an array of object literals. I also get this data to the client through socket.io so when I receive it they are object literals - I don't get them as JSON. It seems that in order to import them into DataTables I need to convert each object to JSON first, though. If I try to pass an object literal it doesn't seem to care for it.

Alternatively, I looked at importing an array of data, but in the example, it shows the array data just contains the values, not the identifiers (for columns) like my data has http://datatables.net/examples/data_sources/js_array.html -- so I'd have to convert it to something like:
[
[ "123", "bar", "biz" ],
[ "234", "abc", "zip" ]
]

...in order to use the aaData import if I understand it correctly.

Can someone confirm if my interpretation of the API / functionality is correct? Out of the 4 possible ways to get data into DataTables:

1. DOM = not an option, unless I want to write jquery code to manipulate the table directly...I'd rather not do this, I'd rather just feed it an array of stuff to populate it

2. JavaScript array - appears to require the data be only values such as [ "value1", "value2", "value3" ] so I would need to convert my data to this format to import it.

3. Ajax Source - won't work with socket.io, and also requires JSON format to import

4. Server Side Processing - I would rather have the processing be in the client for my particular use case

I'm just trying to figure out the best way to import an array of object literals into a table -- can someone confirm / deny my interpretation given how DataTables works? Thanks in advance!

allan

Hi,

Have a look at this blog post which covers how DataTables can read also any JSON data structure: http://datatables.net/blog/Extended_data_source_options_with_DataTables

Example: http://datatables.net/release-datatables/examples/ajax/objects.html

Allan

zenocon

Hi Allan,

Thanks for the tip on the blog. I think I'm close to getting it, but it still isn't quite right. I am using Twitter Bootstrap 2 and I following your blog post on getting that to work http://datatables.net/blog/Twitter_Bootstrap_2 (I have imported both the css and js you have in the example). I'm also using Jade templating http://jade-lang.com/ on the server side with node.js, and I can successfully show a statically defined table like this:

[code]
table.table.table-striped.table-bordered#example
thead
tr
th Rendering engine
th Browser
th Platform
th Engine version
th CSS grade
tbody
tr.odd.gradeX
td Trident
td Internet Explorer 4.0
td Win 95+
td 5
td C
[/code]

and I initialize the table like this:

[code]
$('#example').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
} );
[/code]
When I load this in the browser it shows the table in bootstrap nicely. Now, I'm trying to load my own data which I'm fetching through socket.io.

So, I defined a table without data as such:
[code]
table.table.table-striped.table-bordered#mytable
thead
tr
th _id
th did
th mac
th owners
tbody
[/code]
I left the body blank, since I want to dynamically add this after I fetch the data.

I initialize the table like this:
[code]
$('#mytable').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"aoColumns:": [
{ "mDataProp": "_id" },
{ "mDataProp": "did" },
{ "mDataProp": "mac" },
{ "mDataProp": "owners" }
]
});
[/code]
Now, after I fetch the data that should go in the table, I try this:

$('#mytable').dataTable().fnAddData([data]);

Where data looks like this:
[code]
{"did":"foo bar","mac":"00:06:66:72:16:81","_id":"4faca1c2da808a0984000002","owners":[]}
[/code]
But I get the alert:

DataTables warning (table id = 'mytable'): Requested unknown parameter '1' from the data source for row 1

..and when it shows the table, it just shoves the whole json object into the first column.

So, it displays like this:
[code]
| _id | did | mac | owners |
| {json object} | |

allan

Could you run your table through the debugger please - just so I can see what DataTables thinks it is doing.

Allan

zenocon

http://debug.datatables.net/upuyop

allan

> "aoColumns:": [{

The extra colon in the string isn't going to help there :-). Indeed, DataTables ignores it as an unrecognised parameter.

Allan

zenocon

#facepalm - thanks for finding that, and sorry for wasting your time! I also was passing JSON instead of the raw objects. I've fixed both, and it is now working.

One quick follow-up: I noticed on your blog you indicate how you can navigate down into subproperties with dot notation. The fourth property in that object is an array. How could I display an array? Perhaps I should just define a fnRender and make it a comma delimted string of the objects in the array, or is there a way to show a sub-table somehow?

Thanks for DataTables, by the way -- I'm quite liking it.

allan

> The fourth property in that object is an array. How could I display an array?

You could indeed us fnRender - but I would recommend using mDataProp as a function rather than fnRender. There is another blog post about that: http://datatables.net/blog/Orthogonal_data :-). In the function you would simply use something like "return myArray.join(', ');"

> Thanks for DataTables, by the way -- I'm quite liking it.

Fantastic :-)

Regards,
Allan