Porting JSON data to Tidy-Table
Closed this issue · 1 comments
How do you actually call JSON data to write to the a table created by Tidy-Table? In your sample table, you provide the data array within the script, but you don't actually show how to bring data in with a JSON URL
For example I would like to use the data from the following JSON source in conjunction with Tidy-Table:
http://query.yahooapis.com/v1/public/yql?q=select%20symbol%2C%20EnterpriseValue%2C%20Symbol%2C%20MarketCap%20from%20yahoo.finance.keystats%20where%20symbol%20in%20(%22ABX%22%2C%22GG%22%2C%22NEM%22%2C%22KGC%22)%20%7C%20sort(field%3D%22EnterpriseValue%22%2C%20descending%3D%22true%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=topstock
How would I incorporate this URL into the Tidy-Table script?
To call the JSON data from the remote host note the following example:
$.getJSON('/path/to/script', function(res) {
// generate HTML table
$('#container')
.TidyTable({
columnTitles : res.columns,
columnValues : res.data
});
});
On the server-side, your JSON response should be pre-formatted as:
{
"columns": [
"Column 1",
"Column 2",
"Column 3"
],
"data": [
[
"Value 1A",
"Value 2A",
"Value 3A"
],
[
"Value 1B",
"Value 2B",
"Value 3B"
]
]
}
It is important to maintain this data structure for the following reasons
- Sorting rows by column is easier to achieve using the JavaScript
sort()
method and doesn't require redundant object key names thereby reducing data transfer between the server-side and client. - Since object key ordering cannot be guaranteed an array is used to ensure that result data is presented as defined by the user.
In your case, based on the JSON result returned by the Yahoo API, you will have to pre-process the response before passing this data to Tidy-Table. This can be achieved using JavaScript or by creating a server-side handler that parses the response, pulls out the parts you want in your table results, and sends this data as a JSON to the client to be parsed using the method provided in my example above.
Closing this issue.