JSON object - can't get it to apply to the table

rauls4

So I am getting a nice JSON response from my server:

[code]{
"response": {
"sites": [{
"active": true,
"contact_name": "Peter Framptom",
"customer": "jdkdkh",
"id": "jdfhdfy8ehkdla",
"name": "Name one"
}, {
"active": true,
"contact_name": "John Lennon",
"customer": "jhkkhkh",
"id": "jkhghjojo",
"name": "Name two"
}]
},
"meta:{
"code":200
}
}[/code]

after I execute:

[code]var sitesQueryData = $.getJSON("/myJsonURL/", function(data) {
console.log(data.response.sites[0].name); //This outputs the expected "Name one" on the console.
var oTable = $('#clientTable').dataTable({
"bProcessing": true,
"sAjaxSource": data,
"sAjaxDataProp": "response",
"aoColumns": [
{ "mData": "sites.active" },
{ "mData": "sites.contact_name" },
{ "mData": "sites.name" },
]
});
[/code]

But instead of a nicely populated 3 column table I get nothing :-(

Any help is greatly appreciated!

allan

Use `response.sites` as your sAjaxDataProp (and drop the `sites` from the mData options) . DataTables must be given an array of data - not an object. The individual rows can be objects, arrays or instances, but the container for the rows must be an array.

Allan

rauls4

So if I understand correctly, I can't just pass my data object, I must first make it into an array.

I think I am close, but the array seems to be malformed (an extra set of "):

[code]
[{"aaData":"[{\"site_address\":\"494 Ethels Lane Clearwater FL 34621\",\"contact_name\":\"Jeannette Shelby\",\"id\":\"ahFkZXZ-c3luYXBzZXd0ZXN0MXIZCxIMQ3VzdG9tZXJTaXRlGICAgICAkIAIDA\",\"customer\": ...
[/code]

This is what I am doing to convert it:

[code]
var sitesQueryData = $.getJSON(
"/api/v1/sites/",
function(data) {
//create a new var to hold an array version of data
var newArray = JSON.stringify(data.response.sites);
//create a new object with the key "aaData" and newData as it's value
var newObject = [{"aaData":newArray}];
var deobjectifyNew = JSON.stringify(newObject);
console.log(deobjectifyNew);
var oTable = $('#clientTable').dataTable({
"bProcessing": true,
"sAjaxSource": deobjectifyNew,
"aoColumns": [
{ "mData": "active" },
{ "mData": "contact_name" },
{ "mData": "name" },
]
});
[/code]

rauls4

I just realized that deobjectifyNew is peppered with escape characters as well.

I tried this:

[code]
var newArray = JSON.stringify(data.response.sites);
var newObject = {"aaData":newArray};
console.log(newObject);
[/code]

But it returns an object, which I think was the problem in the first place.

allan

Hi,

Thanks for picking up the support option - I'll e-mail in paid invoice through in just a minute.

Based upon the above JSON structure and your code above I would suggest trying this:

[code]
var sitesQueryData = $.getJSON("/myJsonURL/", function(data) {
var oTable = $('#clientTable').dataTable({
"bProcessing": true,
"sAjaxSource": data,
"sAjaxDataProp": "response.sites",
"aoColumns": [
{ "mData": "active" },
{ "mData": "contact_name" },
{ "mData": "name" },
]
});
[/code]

Now the one thing that the above code doesn't do is give any access to the `meta` variable in the DataTable. Is that okay, or have I misunderstood the data?

Thanks,
Allan

rauls4

Least I can do!

I still get a blank table :-(

here is a sample from the actual JSON response. (I don't really care about the META area):

{"meta": {"code": 200}, "response": {"sites": [{"customer": "ahFkZXZ-c3luYXBzZXd0ZXN0MXIVCxIIQ3VzdG9tZXIYgICAgICAgAoM", "name": "Test Site #47", "id": "ahFkZXZ-c3luYXBzZXd0ZXN0MXIZCxIMQ3VzdG9tZXJTaXRlGICAgICAkIAIDA", "site_address": "494 Ethels Lane Clearwater FL 34621", "contact_phone": "863-653-2092", "active": true, "contact_name": "Jeannette Shelby"}, ... an so forth

allan

Oof - sorry, I'm being daft. There is no need for sAjaxSource and sAjaxDataProp here since you are getting the data using your own Ajax call!!

[code]
var sitesQueryData = $.getJSON("/myJsonURL/", function (data) {
var oTable = $('#clientTable').dataTable({
"bProcessing": true,
"aaData": data.response.sites,
"aoColumns": [
{ "mData": "active" },
{ "mData": "contact_name" },
{ "mData": "name" }
]
});
});
[/code]

Or using DataTables' Ajax rather than `$.getJSON` :

[code]
var oTable = $('#clientTable').dataTable({
"bProcessing": true,
"sAjaxSource": "/myJsonURL/",
"sAjaxDataProp": 'response.sites',
"aoColumns": [
{ "mData": "active" },
{ "mData": "contact_name" },
{ "mData": "name" }
]
});
[/code]

I think either of them should do it.

Allan

rauls4

Ah ha! You sir, are a gentleman! Thank you so much, for such a great product and incredible support.