Loading Datatables with a JSON file.

incutonez

Hi all, I know this has probably been asked a million times (just can't find a good example), but I've got a question about loading a JSON file into datatables. So my JSON file looks like so:

test.json
[code]
{
hash1: [[1, "value1"], [2, "value2"]],
hash2: [[3, "value3"], [4, "value4"]],
... (and so on and so forth)
}
[/code]

I want to take this hash and just throw it in my dataTable, but I apparently have no idea how to do this... I first was making an AJAX call and grabbing the JSON file, then looping through each key and adding them to the table, so let's say I did this:

[code]
var table = $('#example').dataTable({
'bAutoWidth': false,
'aoColumns': [{'sWidth': '100px', 'sTitle': 'Hash'}, {'sWidth': '100px', 'sTitle': 'Id'}, {'sWidth': 100px, 'sTitle': 'Value'}]
});
$.ajax({
dataType: 'JSON',
url: 'test.json',
async: false,
success: function(json) {
for (hash in json) {
for (i = 0; i < json[hash].length; i++) {
table.fnAddData([hash, json[hash][i][0], json[hash][i][1]]);
}
}
error: function() {
alert("failed!");
}
});
[/code]

But when my JSON file is massive, the browser just locks up, so I tried some recursive function way of updating the table, but that only provided race conditions... what I want to know is, is there an easier way of just plopping my data into the dataTable? I mean, there's got to be! I'm just overlooking something... and to note, I tried putting an aaData in front of all of my JSON file and then just using sAjaxSource, but that didn't seem to work... it looked like this though:

[code]
{aaData: {
hash1: [[1, "value1"], [2, "value2"]],
hash2: [[3, "value3"], [4, "value4"]],
... (and so on and so forth)
}}
[/code]

Any help would be appreciated. Thanks!


**Edit, it's also good to say I looked at the example given, but it doesn't really help out much because I don't know what your txt file looks like. I think it'd be helpful to post an example of how that should look.

pimperish

I think the main problem is your json object.
Prior to 1.8, DataTables just wants a simple 2-D array, so if you did:
[code]
[
[hash1, 1, "value1"]
[hash2, 2, "value2"]
...
]
[/code]
passing something like that to addData should work just fine.

1.8 lets you do some fancier stuff, but even then, I think you would still have to change your json object a bit

incutonez

Yeah, but with that method, I'd have to list hash1, hash2, ..., hashn multiple times. That doesn't seem really efficient! We should be able to just use the JSON file!

And what I'd like to know is... why does iterating through the JSON object and adding to the table lock up the browser? It only happens for bigger JSON files, but still, I feel like it shouldn't be that big of a deal. And I know it's the whole table.fnAddData bit because if I comment that out, it's fine... So what I'm doing is:

[code]
var i;
var len;
var obj = new Object();
var name;

var update = function() {
if (i < len) {
table.fnAddData([name, obj[i][0], obj[i][1]]);
i++;
setTimeout(update, 100);
}
};

$.ajax({
dataType: 'JSON',
async: false,
url: 'test.json',
success: function(json) {
for (hash in json) {
name = hash;
obj = json[hash];
len = obj.length;
i = 0;
setTimeout(update, 100);
}
}
});
[/code]

I know I'm doing some risky things here, but it's really the only way I can think of, but like I said, I run into race conditions... it always just gives me the last hash and its values.

allan

As pimperish notes, DataTables expects aaData to be an array. With DataTables 1.8 it can be an array of objects, but each row must be represented as an array element in aaData - this is just so DataTables can loop over the array and add the data for each row as required (it would be possibly to do a 'for in', but it doesn't for reasons of trying to keep it simple, and this effect, if required, can be achieved using fnAddData).

In your above code, why have you got a setTimeout? That shouldn't be needed. Is that to stop the browser locking up? How large is your data set? It might be worth looking at deferred rendering to speed things up.

Allan

incutonez

An array of objects, so would my hash key to an array (listed below) work? And it definitely makes sense to ultimately have an array as what you're adding, but I guess I was just expecting too much and could throw key values in as well.

[code]
{
aaData: [
hash1: [[1, "value1"], [2, "value2"]],
hash2: [[3, "value3"], [4, "value4"]],
hash3: [[5, "value5"], [6, "value6"]]
]
}
[/code]

Yeah, so the setTimeout was in place to give the browser a "breath" for each load, and hopefully to kind of make the loop go slower because as of right now, my last hash key + its data is the only thing that's being loaded into the dataTable, which is why I think I have a race condition. So using my example above, only hash3 would be loaded into the dataTable.

The one JSON file that I'm working with is about 500kb, but it could definitely go higher than that. And how do I do deferred rendering? I would definitely give that a try.

GregP

Deferred rendering is enabled with a parameter in the initialization object:

"bDeferRender": true

incutonez

Oh, duh, I thought it was some sort of Javascript technique, haha. Thanks, I'll give that a go!

allan

@incutonez - the "json" you posted isn't valid json... If you run it through http://jsonlint.com you'll get errors.

Allan

incutonez

Right, but you said dataTables 1.8 takes an array of objects... I obviously failed at that, haha. Could I get an example?

allan

It does, but that is a mix of object and array syntax you've got there :-). This is an array of objects: http://datatables.net/release-datatables/examples/ajax/sources/objects.txt , and the running example: http://datatables.net/release-datatables/examples/ajax/objects.html

Allan

incutonez

Ahhhhhhhhhhhh, now I get it! Makes much more sense when I see a distinct example. Thanks! I wish it was easier to load an array of objects that point to arrays... haha. I'll figure something out. Thanks for all the help y'all.