Send Complex JS Data In A Web Page

March 17, 2017

I had a dilemma; how do I send a bunch of complex JavaScript data within HTML without using AJAX. The server is running Tomcat and the HTML content is generated by some Java classes triggered by a servlet. The funny thing about this is that once I solved the problem, I realized that I had solved it once before back when I created my trip log map page. But this new problem seemed on the surface to be different so the solution evaded me for a day or two.

Trip Log Page

The requirement is that a web page be sent to the browser and that a bunch of processing be done to manipulate HTML form content in the browser with no further server interaction. The data consists of rules for when to show and when to hide various form fields, as well as data to populate lists in the form conditionally on the selections from other lists. Imagine a web site where you pick the make of a car (Ford, Chevy, Toyota…) and then the next list contains only models from the selected car company (Bronco, Mustang, Corvette…). How would all of the models of all of the car companies be sent to the browser so that an extra query isn’t needed for the model field each time the make selection changes?

The company that I work for uses AJAX for another “product” but this seemed impractical since generating the web page takes a lot of processing time to get and parse data from a database. Doing that parsing each time a single field changes is not at all efficient. Plus, the other “product” usually has a few large lists on a page and my forms might have a hundred.

Options

Option 1 was to use data attributes available in HTML5 and store all of the extra stuff that way. I opted against this because I would need to convert a two-level tree structure into some form of string that I could parse on the client. I hate writing code that parses or compares strings over and over again because I was schooled in writing very efficient code back when I worked on high speed search algorithms in the biotech field. In that field, writing one extra “if” test in a loop could make a product too slow to sell. This option would have made it easy to find the data content while looking at the visible tree of form fields, which would have been a nice side-effect.

Option 2 was to use the DOM by storing the data in div elements as if it were just more HTML content. The data elements would be hidden and would just be available to be read by the JavaScript when needed. This seemed like a pretty good idea because the data would be human readable during the development process. I rejected this option because I have no idea how a lot of extra hidden content would affect the page rendering. Like the first option, this option would have made it easy to find the data content while looking at the visible tree of form fields.

Option 3 was actually a bunch of failed ideas that never got past the first threshold of analysis. For instance, I could store XML data in an HTML5 data attribute or in one of those weird data elements that I have never used before. Or how about having a separate HTML select field for each variation of a list and then just displaying the one that has the appropriate data? That’s just another way to use the DOM and would add some work to hide and disable the unwanted “select” fields.

Option 4 was to generate some JavaScript code and pass it that way within a script element. It’s funny that this was not the first option since the trip log page does almost that exact thing. And now that I am writing this, I see that I didn’t do the best possible job on the trip log page because I generate, in PHP on the server, a JavaScript function that creates an array of trip information and calls functions to add data to the trip object. With this new Java project, I am just generating a global variable declaration and initializing it using literal data. I was just not as aware of how to declare and initialize a tree of complex data objects in JavaScript before now.

Above is a rough estimation of what the data will look like. This is taken from a working test case that doesn’t have a lot of content. But the idea of declaring the global variable and initializing it to literal objects, should be fairly clear. I manually added a lot of space and indentation to make it a little more readable in this example.

The final step in this development task is to write a JavaScript function that finds each of the form fields on the page and actually store a reference to the appropriate field object in this tree. Or maybe I’ll do it both ways and add a reference to the input field within this tree. That way, when a function gets called that a list selection is made, it will be easy to step through the form fields and change the field contents appropriate. It may not be obvious but the HTML form fields all have an “id” attribute that matches the “id” in this data structure. So making the cross reference won’t be hard at all.