JSON Feed URL as Source

bricolage

I'm having a hard time understanding how to retrieve data from a JSON feed URL and populate it into Datatables. Does it have to go through MySql first?

The URL: https://xxxx:xxxx@slx.arlcap.com/sdata/rcs/tablet/products/Y6UJ9A00000Z/filings

Which shows me this data:

[code]"{"Filings":[{"Id":"Q6UJ9A01XO76","Filing":"Post-Effective Amendment to Registration Statement","FilingDate":"\/Date(1311638400000)\/","FilingGroup":null,"FilingType":"POS AM","SecNumber":"333-163069","HtmlUri":"http://c291130.r30.cf1.rackcdn.com//333-163069-2012224-msivIgvkU21N3ncXF12wg.html","PdfUri":"http://c291130.r30.cf1.rackcdn.com//333-163069-2012224-c1KziUP2kmvzTP5NtqRoQ.pdf","TxtUri":"http://c291130.r30.cf1.rackcdn.com//333-163069-2012224-f1pta9LmPUKfYug0118w.txt","XbrlUri":null,"RtfUri":"http://c291130.r30.cf1.rackcdn.com//333-163069-2012224-0t1FFGQGqkycHef0fwDGHQ.rtf"},{"Id":"Q6UJ9A01XO79","Filing":"Quarterly Report","FilingDate":"\/Date(1313107200000)\/","FilingGroup":null,"FilingType":"10-Q","SecNumber":"333-163069"... etc."[/code]

Any help would be appreciated!

allan

Hi,

> Does it have to go through MySql first?

No - you can use an SQL data source if you want, but you really don't need to, almost any JSON feed can be used with DataTables through the use of the sAjaxDataProp and mDataProp parameters. So for example your table initialisation would go something like:

[code]
$('#example').dataTable( {
"sAjaxDataProp": "Filings",
"sAjaxSource": "/sdata/rcs/tablet/products/Y6UJ9A00000Z/filings",
"aoColumns": [
{ "mDataProp": "Id" },
{ "mDataProp": "Filing" },
{ "mDataProp": "FilingDate" },
... etc ...
]
} );
[/code]

There might be other options that you want to use as well, but that's the basics of it.

You might be interested in this blog post as well, which talks about mDataProp and some of its abilities: http://datatables.net/blog/Extended_data_source_options_with_DataTables

Regards.
Allan

bricolage

Allan,


Here's my feed right now:
http://www.motion.tc/DataTables-1.9.0/examples/ajax/ajax.html

(1)

I can only get the feed to work if I specify a non-password protected link for the source.

So is this something that's expected? or is there another way to pass along the log in information without using "xxxx:xxxx@slx.arlcap.com...."

(2)

How can I format the date to display as "Month/Day/Year"?

(3)

In the columns for the links, is there a way to just have the field say "Click here to view" and then point to the link?

Thank you!

allan

Hi,

1. It sounds like you might be running into a cross domain issue - is the feed you are trying to get with a password in a different domain? If so you would need to use JSONP to load the data: http://datatables.net/release-datatables/examples/server_side/jsonp.html (this is server-side processing, but the principle applies to client-side processing as well). The reason for this is the browser's implement cross domain protection to stop bad people hijacking your browser with Javascript.

2. Your date string is currently in the format "\/Date(1311638400000)\/". I presume that this is a unix time stamp in milliseconds? So you have two options, 1. you can change whatever is generating the feed, or two you can parse and display it on the client-side using either mDataProp or fnRender:

[code]
"fnRender": function (o, val) {
var stamp = val.match(/([0-9]+)/)[0];
var d = new Date( parseInt( stamp, 10 ) );

// format date output as needed with Javascript date properties and return the string
}
[/code]

Documentation for the Javascript date object can be found here: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date .

3. Absolutely - in aoColumns (or aoColumnDefs) for your column you could do something like:

[code]
{
"fnRender": function (o, val) {
return 'Click here to view';
}
}
[/code]

Regards,
Allan