How to build a reusable data table from JSON
Web development projects often call for building a tabular summary of data.
Better still is if you can have the table data returned from the web server as JSON as part of an AJAX response.
And finally, as a programmer, it occurs to me that if we use an agnostic process to build the table and abstract
the code which consumes the JSON in a library it becomes reusable. This is win, win, win.
While I run into this scenario often, I've never really summarized it for consumption by others. This page is an effort to do just that.
own builder rather than falling for the wiles of a framework such as ExtJS. (In my opinion, ExtJS brings a lot to the table, but at
a significant cost that can be difficult to explain to inexperienced front-end developers.)
Look through the code to see the example. Here are a few points I think warrant calling out.
- The build function should know nothing specific about the data that it can't discover -from- the data.
(This will lend to reusing this in a variety of contexts...all specifics being driven by the data itself rather than the function.)
- By passing "column_headings" to describe the table columns in the data the build function can support tables of varying sizes and complexity.
- By including an extra field in the "column_headings" data, you can describe the type of data the builder should expect to find for each column--this helps to support an additional layer of abstraction allowing you to present numbers, currency, percentages, and dates in a variety of ways. In fact this allows you to abstract a rich set of information types which scale independently from the data driving the builder. (For beginning programmers, this aspect represents a learning milestone which can serve you well during your career.)
- Technically the <style> section shown in the code example is supposed to go into the <head> section of your HTML page.
- My example provides a hint for how to apply special formatting based on our own custom notion of "types".
This formatting is done without polluting the initial JSON data; this is important because converting 100.123 into "$100.12" in the JSON
will change the way .sort() works...instead of sorting numerically, we'd be sorting as a string, which might not do what you think.
to present currency vs a number with greater decimal precision. So, by providing our own informational types for presentation, and keeping intact the
beginning programmers...if that's you, you should consider getting a good
Clicking the button will call the buildSummaryTable function (shown in the code sample below) and pass a reference to the data and the HTML element where the output should be rendered. While this example doesn't currently use AJAX to get the JSON, the buildSummaryTable function call would go in the success callback function. (As time permits I'll try to provide extensions to this example to demonstrate that more clearly.)
Thanks for your time, and as always, feedback is appreciated. (You can contact me via the "contact the author" link.) Be sure to check out some of my other examples and give our sponsors consideration--their support helps us keep this site running. Best wishes!